Javascript 反应：如何向ES6中的点击功能发送道具？

我正在学习React，在向点击功能发送道具时遇到问题。我正在尝试创建一个简单的ES6计数器组件，当单击按钮时，该组件将递增

我的点击功能很简单：

click() {
   this.setState({
        count: this.state.count + value
    })
}

我已将defaultProps设置为：

Counter.defaultProps = { valueOne: 1 }

并在渲染功能中创建了我的按钮：

<Button className="btn" clickHandler={this.click} text="Click me" value={this.props.valueOne}/>

---

它位于

事件.target.value

中，只需将处理程序更改为：

click(event) {
    this.setState({
        count: this.state.count + event.target.value
    })
}

类计数器扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={count:0，
价值一：1
};
this.click=this.click.bind（this）；
}
单击（事件）{
这是我的国家({
计数：this.state.count+event.target.value
})
}
render（）{
返回(
Count{this.state.Count}
)
}
}

---

这本质上就是您要做的吗？

您可以使用

event.target.value

访问该值。 但是我注意到您的代码中可能有一个bug，因为

this.setState

可以异步执行（如所解释的）。最好使用接受回调的setState的第二个版本，而不仅仅是对象。像这样：

    click(event) {
      this.setState((prevState) => {
         return {
            count: prevState.count + event.target.value
         }
      })
    }

  class Counter extends React.Component {

            constructor(props) {
                super(props);
                this.state = { count: 0,
                               valueOne: 1
                             };
                this.click = this.click.bind(this);
            }

            click(event) {
                this.setState({
                    count: this.state.count + event.target.value
                })
            }

            render() {
                return (
                    <div className="container">
                      <h1>Count {this.state.count}</h1>
                        <Button className="btn blue-btn" clickHandler={this.click} text="Click me" value={this.state.valueOne}/>
                    </div>
                )
            }

        }

    click(event) {
      this.setState((prevState) => {
         return {
            count: prevState.count + event.target.value
         }
      })
    }