Question

我在onClick中使用了this.handleClick，但它警告了一个错误。（这没有区别）

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.setState = {field}

通过

this.setState({field: field})

Answer 2

你没有向你的函数传递任何参数，也使用this.handleClick而不是调用类。

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

也是setState是一个函数

this.setState({field: field})

Answer 3

您无法直接使用Buttons.handleClick()，因为Buttons是一个类。您需要在访问它之前实例化该类的方法。这不会与React合作。

因此，最好的方法是使用this来访问类中的本地方法。 this.setState()是一个函数，您需要传递新的状态对象。希望能帮助到你！

＆＃13;

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

＆＃13;

为什么我的onClick事件不起作用？

3 个答案: