Question

我的任务相当简单。单击按钮我想控制日志输入值。会发生什么是它记录输入更改而不是单击。我做错了什么？

   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

Answer 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

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

1 个答案: