javascript - 通过react.js中的props传递用户输入值

Question

我有2个组件，如何通过onChange将用户输入的值传递给父组件？我可以在 onChange 上传递“触发器”，但如何传递值？

https://jsfiddle.net/gboaxm30

var InputComp = React.createClass({
  render: function() {
    return (
    <div>
     <input type="text" onChange={this.props.newVal} />
     </div>
    );
  }
});

var App = React.createClass({
    getInitialState(){
  return {
     inputVal: 0
  }
  },
  inputChangedHandler(props) {
    //set user changed value to inputVal
    console.log(props)
  },
  render() {
    return(
    <div>
        <InputComp newVal={this.inputChangedHandler}/>
      <h4>{this.state.inputVal}</h4>
      </div>
    )
  }
})

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

Answer 1

在子组件的 onChange 事件上调用函数，然后访问输入的值(如 e.target.value)，然后将其传递给父组件，如this.props.newVal(e.target.value);

var InputComp = React.createClass({
  handleChange(e) {
    this.props.newVal(e.target.value);
  },
  render: function() {
    return (
    <div>
     <input type="text" onChange={this.handleChange} />
     </div>
    );
  }
});

var App = React.createClass({
    getInitialState(){
  return {
     inputVal: 0
  }
  },
  inputChangedHandler(val) {
    console.log(val);
    this.setState({inputVal: val});
  },
  render() {
    return(
    <div>
        <InputComp newVal={this.inputChangedHandler}/>
      <h4>{this.state.inputVal}</h4>
      </div>
    )
  }
})

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<强> JSFIDDLE