ReactJS

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 link: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 - 将输入值转发给父组件

ReactJS - Forwarding input value to parent component

components