ReactJS - 将输入值转发到父组件答案

【问题标题】：ReactJS - Forwarding input value to parent componentReactJS - 将输入值转发到父组件
【发布时间】：2015-12-15 19:18:33
【问题描述】：

我对相当简单的任务有疑问。单击按钮时，我想控制台记录输入值。发生的情况是它记录输入更改而不是单击。我做错了什么？

   var Tasker = React.createClass({
          getInitialState: function() {
            return {
            };
        },
        handleChange: function(event) {
            this.setState({
                value: event.target.value
            });
        },
        render: function () {
          return (
            <div>
              <input type="text" value={this.state.value} onChange={this.handleChange}/>
              <button onClick={this.props.onClick(this.state.value)}>Add task</button>
          </div>
          );
      }
  });

   var List = React.createClass({
        handleNewTaskClick: function (value) {
          console.log(value);
      },
      render: function  () {
        return (
            <Tasker onClick={this.handleNewTaskClick}/>
            );
    }
});
      ReactDOM.render(<List />, document.getElementById('react-app'));

JSbin链接：https://jsbin.com/vororomuzo/edit?html,console,output

【问题讨论】：

标签： reactjs components

【解决方案1】：

不确定为什么每次状态更改时都会触发 onClick，而不是触发事件时触发，但是如果您创建一个 handleClick 方法并调用它而不是在 jsx 中处理它，它可以正常工作。

handleClick: function() {
  this.props.onClick(this.state.value);
},
render: function () {
  return (
    <div>
      <input 
        type="text" 
        value={this.state.value} 
        onChange{this.handleChange}
      />
      <button onClick={this.handleClick}>Add task</button>
    </div>
  );
}

更新jsbin

【讨论】：