為什么 React 告訴我 this.handleClick 不是 function？

Question

我正在使用 React 創建一個簡單的計算器，我正在嘗試將 onClick function 添加到按鈕。 我正在使用與 tictactoe 游戲的反應教程中使用的相同技術，但是當我單擊任何按鈕時，我只會收到以下錯誤消息：

Uncaught TypeError: this.handleClick is not a function
    at onClick (index.js:71)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates$1 (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

我的代碼如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Screen extends React.Component {
  render() {
    return (
      <p>99+10</p>
    );
  }
}

class Operators extends React.Component {
  render() {
    return (
      <div>
        {this.props.renderButton('+')}
        {this.props.renderButton('-')}
        {this.props.renderButton('x')}
        {this.props.renderButton('/')}
      </div>
    );
  }
}

class Numbers extends React.Component {
  render() {
    return (
      <div>
        <div className="nums-row">
          {this.props.renderButton(1)}
          {this.props.renderButton(2)}
          {this.props.renderButton(3)}
        </div>
        <div className="nums-row">
          {this.props.renderButton(4)}
          {this.props.renderButton(5)}
          {this.props.renderButton(6)}
        </div>
        <div className="nums-row">
          {this.props.renderButton(7)}
          {this.props.renderButton(8)}
          {this.props.renderButton(9)}
        </div>
        <div className="nums-row">
          {this.props.renderButton('.')}
          {this.props.renderButton(0)}
          {this.props.renderButton('=')}
        </div>
      </div>
    );
  }
}

function CalculatorButton(props) {
  return (
    <button onClick={props.onClick} >
      {props.text}
    </button>
  );
}

class Calculator extends React.Component {
  handleClick(text) {
    console.log(text);
  }

  renderButton(text) {
    return (
      <CalculatorButton 
        onClick= {() => this.handleClick(text)}
        text={text}
      />
    );
  }

  render() {
    return (
      <div className="calculator-container">
        <div className="calculator">
          <div className="screen">
            <Screen /> 
          </div>
          <div className="buttons">
            <div className="numbers">
              <Numbers renderButton={this.renderButton} />
            </div>
            <div className="operators">
              <Operators renderButton={this.renderButton} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Calculator />,
  document.getElementById('root')
);

這是界面的圖片，這樣可能更容易理解我在問題開始時所說的內容。

提前感謝您的幫助。

Answer 1

您需要將renderButton function 綁定到Calculator組件實例。

這可以通過多種方式完成：

#1。 在構造函數中：

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.renderButton = this.renderButton.bind(this);
  }

  /* ... */
}

#2。 在渲染中：

<Numbers renderButton={this.renderButton.bind(this)} />

#3。 或者通過將renderButton方法更改為箭頭 function：

renderButton = (text) => {
  /* ... */
}

更多細節以及一些優點和缺點可以在React 常見問題解答部分找到。

Answer 2

this.props.renderButton('+')立即調用renderButton並將返回值分配為事件處理程序。

這在 React 文檔中有具體介紹：

 <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上面兩行是等價的，分別使用箭頭函數和Function.prototype.bind。

在這兩種情況下，表示 React 事件的 e 參數將作為 ID 之后的第二個參數傳遞。 使用箭頭 function，我們必須顯式傳遞它，但綁定任何進一步的 arguments 都會自動轉發。

Answer 3

要解決您的問題，只需使用 Arrow function。 為此，請將兩個事件處理程序handleClick 和 renderButton替換為以下代碼。 它完美地工作。

handleClick = (text) => {
    console.log(text);
};

renderButton = (text) => {
    return (
        <CalculatorButton
            onClick={() => this.handleClick(text)}
            text={text}
        />
    );
};

Answer 4

您還可以將 onclick 設置為 null，認為 <ComboSelect... onClick={null} /> 對我來說是正確的