なぜ私のonClickイベントは機能しませんか？

Question

私はのonClickでthis.handleClickを使用しますが、それは間違いを警告します。（これはdifinedされていない）

var Buttons = React.createClass({ 
     getInitialState() { 
      return { 
      field: ':P ' 
      } 
     }, 
     handleClick(field) { 
      return this.setState = { 
      field 
      } 
     }, 
     render() { 
      let count = 1; 
      return (<div> 
      <h1> { 
       this.state.field 
      } < /h1> { 
       buttonValues.map(function(val) { 
       return <button key = { 
        count++ 
       } 
       onClick = { 
        Buttons.handleClick 
       } > { 
        val 
       } < /button> 
       }) 
      } < /div> 
     ) 
     } 
    }) 
    ReactDOM.render(< Buttons/> , document.getElementById('app')); 

Answer 1

です。メソッドにアクセスする前にクラスをインスタンス化する必要があります。そして、これはリアクションでは動作しません。

したがって、thisを使用して、クラス内のローカルメソッドにアクセスすることをお勧めします。 this.setState()は、新しい状態オブジェクトを渡す必要のある関数です。それが役に立てば幸い！

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div> 
 
<script type="text/babel"> 
 
var buttonValues = ['hello','there'] 
 
    var Buttons = React.createClass({ 
 
    getInitialState() { 
 
     return { 
 
      field: ':P ' 
 
     } 
 
     }, 
 
     handleClick(field) { 
 
     this.setState({ 
 
      field 
 
     }) 
 
     }, 
 
     render() { 
 
     var _this = this 
 
     return (<div> 
 
      <h1> { 
 
      this.state.field 
 
      } < /h1> { 
 
       buttonValues.map(function(val, i) { 
 
       return <button key = { 
 
        i 
 
       } 
 
       onClick = {() => 
 
        _this.handleClick(val) 
 
       } > { 
 
        val 
 
       } </button> 
 
     }) 
 
    } < /div> 
 
     ) 
 
     } 
 
    }) 
 
    ReactDOM.render(< Buttons/> , document.getElementById('app')); 
 
</script>

Answer 2

あなたは

this.setState({field: field})

Answer 3

によって

this.setState = {field}

を交換する必要が

関数に引数を渡すことはなく、calliではなくthis.handleClickも使用しますそのクラス。

onClick = {this.handleClick.bind(null, val)} 

もSETSTATE Buttonsがクラスであるため、あなたが直接Buttons.handleClick()を使用することはできません機能

this.setState({field: field})