React：ES6で小道具をクリック機能に送るにはどうすればいいですか？

Question

私はリアクションを学んでおり、クリック機能に小道具を送るのに問題があります。私はボタンがクリックされるとインクリメントするシンプルな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}/> 

しかし、私は、ボタンをクリックしてクリック機能に値を「送る」ようにする人を見つけ出すことはできません。私はちょうどメッセージvalue is not definedを得る。

誰でも私を正しい方向に向けることができますか？

何か助けていただければ幸いです。

私の完全なコードがある：それはevent.target.valueにあります

 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

だけにハンドラを変更します。

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は非同期に（hereのように）実行できるので、コードにバグがある可能性があることに気付きました。 setStateの2番目のバージョンは、オブジェクトだけでなく、コールバックを受け入れることをお勧めします。このように：

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