如何在React.js中使按鈕交互？

Question

請指出我的錯誤。

我想寫一個交互式按鈕，顯示它的點擊次數。 每次下一次單擊時，按鈕上的數字必須增加1。 初始編號為0，因此，例如，在5次單擊后，它變為5.沒有交互式元素，代碼將正常呈現。

這是我的代碼：

class Button extends React.Component{
  constructor(props){
    super(props);
    this.state = {counter: 0};
  };

  handleClick(){
    this.setState(
      prevState => ({counter: prevState.counter + 1})
    );
  }

  render(){
    return (
      <button onClick={this.handleClick}>{this.state.counter}</button>
    );
  }
}

這是我得到的錯誤：

TypeError: Cannot read property 'setState' of undefined
handleClick
src/index.js:30:6
  27 | 
  28 |   render(){
  29 |     return (
> 30 |       <button onClick={this.handleClick}>{this.state.counter}</button>
     |      ^  31 |     );
  32 |   }
  33 | }
View compiled
▶ 20 stack frames were collapsed.

先感謝您！

Answer 1

在你的榜樣， this在你的handleClick()函數是指從您的點擊觸發事件的范圍。 為了解決這個問題，您必須將函數范圍綁定到元素。

將this.handleClick = this.handleClick.bind(this)添加到您的構造函數中，它應該可以正常工作。

https://reactjs.org/docs/handling-events.html

Answer 2

您可以更高級一點，並使用ECMAScript 6箭頭函數語法，這將避免這種問題，也避免使用.bind(this) 。

如果你聲明handleClick像handleClick = () => {} ，你將不需要在你的構造函數this.handleClick.bind(this) 。 一切都將正常工作，當你使用this ，這將是類的this ，而不是函數的this 。

這是使用較新版本的javascript，強烈建議不要使用.bind(this) ，這可能會導致一些問題。

只需聲明handleClick就像這樣，它將工作而無需使用.bind(this)

  handleClick = () => {
    this.setState(
      prevState => ({counter: prevState.counter + 1})
    );
  }

Answer 3

您必須綁定單擊處理程序：

...
  constructor(props){
    super(props);
    this.state = {counter: 0};
    this.handleClick.bind(this) // <----- here
  }
...

Answer 4

我想你有兩個選擇：

1. 將bind添加到構造函數中。 this.handleClick.bind(this) ，這將保證您的this實際上指的是按鈕對象。

2. 使用更新的格式，我更喜歡。

    handleClick = () => { this.setState( prevState => ({counter: prevState.counter + 1}) ); } 

關於很多React主題的更多有用文檔： https ： //reactjs.org/docs/react-component.html