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

Question

I have 2 component, how do I pass user entered value through onChange to parent component? I'm able to pass the 'trigger' upon onChange, but how to pass the value along?

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

Call a function on the onChange event of the child component and then access the value of input like e.target.value and then pass it to the parent component like 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

Answer 2

I've made a demo for you here: http://codepen.io/PiotrBerebecki/pen/pEAQzV

The idea is to use the so-called controlled input as defined in the React docs: https://facebook.github.io/react/docs/forms.html#controlled-components

 var InputComp = React.createClass({
  getInitialState() {
    return {
      userInput: ''
    };
  },

  onChange(event) {
    this.setState({
      userInput: event.target.value
    });
    this.props.newVal(event.target.value);
  },

  render() {
    return (
      <div>
         InputComp
         <input type="text" 
                value={this.state.userInput}
                onChange={this.onChange} />
      </div>
    );
  }
});




var App = React.createClass({
  getInitialState() {
    return {
     inputVal: ''
    };
  },

  inputChangedHandler(valueFromChild) {
    console.log('valuefromChild:', valueFromChild);
    this.setState({
      inputVal: valueFromChild
    });
  },

  render() {
    return (
      <div>
        <InputComp newVal={this.inputChangedHandler}/>
        <h4>{this.state.inputVal}</h4>
      </div>
    );
  }
})

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

Answer 3

You should take the value from the event

  inputChangedHandler(e) {
      //set user changed value to inputVal
      console.log(e.target.value)
  },

Answer 4

I thinktThis would be helpful for you.

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

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

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