Question

我正在学习reactJS，我遇到了定义函数和点击按钮时调用它的问题。这是我的代码：

handleClick(){
    alert()
}

render(){

  return(
    <div><button onClick={this.handleClick}>Click Here</button></div>
  )
}

我正在Uncaught TypeError: this.handleClick is not a function

Answer 1

按钮onClick的范围是按钮本身，而不是您的组件，因此按钮上不存在undefined因为handleClick。您需要bind构造函数中的this点击处理程序：

  this.handleClick = this.handleClick.bind(this);

或使用箭头符号：

 handleClick = () => {
      console.log(' clicked!!');
  }
  render() {
    <button onClick={this.handleClick}>Clicky!</button>
  }

Answer 2

处理这个问题的正确方法是将它绑定到构造函数，使其看起来像这样。

class ComponentName extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(){
    alert('Do something')
  }

  render(){
    return(
       <div>
          <button onClick={this.handleClick}>Click Here</button>
        </div>
      )
  }
}

函数未定义reactJS

2 个答案: