当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Pass user input value through props in react.js

问题描述:

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')

);

网友答案:

You should take the value from the event

  inputChangedHandler(e) {
      //set user changed value to inputVal
      console.log(e.target.value)
  },
网友答案:

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

网友答案:

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')
);
分享给朋友:
您可能感兴趣的文章:
随机阅读: