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

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

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

var Tasker=React.createClass({
getInitialState:函数（）{
返回{
};
},
handleChange:函数（事件）{
这是我的国家({
值：event.target.value
});
},
渲染：函数（）{
返回(
添加任务
);
}
});
var List=React.createClass({
handleNewTaskClick:函数（值）{
console.log（值）；
},
渲染：函数（）{
返回(
);
}
});
render（，document.getElementById（'react-app'）；

---

JSbin链接：

不确定为什么每次状态改变时都会触发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>
  );
}

handleClick:function（）{
this.props.onClick（this.state.value）；
},
渲染：函数（）{
返回(
添加任务
);
}

更新