React：如何將道具發送到ES6中的click函數？

Question

我正在學習React，無法將道具發送到click函數。 我正在嘗試創建一個簡單的ES6計數器組件，該組件在單擊按鈕時會遞增。

我的點擊功能很簡單：

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

我已經將defaultProps設置為：

Counter.defaultProps = { valueOne: 1 }

並在render函數中創建了我的按鈕：

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

但是我不知道是誰讓按鈕“發送” click函數的值。 我只是得到消息value is not defined 。

有人能在這里向我指出正確的方向嗎？

任何幫助表示贊賞。

我的完整代碼是：

       class Counter extends React.Component {

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

            click() {
                this.setState({
                    count: this.state.count + 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.props.valueOne}/>
                    </div>
                )
            }

        }

        Counter.defaultProps = { valueOne: 1 } //Defaults

        const Button = (props) => {
            return (
                <button className={props.className} onClick={props.clickHandler} value={props.value}>{props.text}</button>
            )
        }

        ReactDOM.render(
            <Counter valueOne={1} valueTwo={10} valueThree={100} />, 
            document.getElementById('app')
        );

Answer 1

在event.target.value ，只需將處理程序更改為：

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

Answer 2

  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>
                )
            }

        }

從本質上來說，這是您要嘗試做的事情嗎？

Answer 3

您可以使用event.target.value訪問該值。 但我注意到有在代碼中可能的錯誤，因為this.setState可以異步執行（如解釋在這里 ）。 您最好使用第二個版本的setState接受回調，而不僅僅是一個對象。 像這樣：

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