Question

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

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

Answer 2

我在这里为你做了一个演示：http://codepen.io/PiotrBerebecki/pen/pEAQzV

我们的想法是使用React文档中定义的所谓受控输入：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

您应该从事件中获取值

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

Answer 4

我认为这对您会有所帮助。

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"));

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

4 个答案: