如何將onclick處理程序正確地綁定到`this`上React

Question

解釋爲什麼這不是重複的：我的代碼已經工作，我已經包含在註釋中。問題是爲什麼當我將它包含到點擊處理函數時，this上下文發生了變化。
我正在嘗試React中的計算器項目。目標是將onclick處理程序附加到數字按鈕，以便數字顯示在計算器顯示區域中。如果處理程序直接寫入渲染方法，則它正在工作，但是，如果我嘗試從ComponentDidMount中收到錯誤this.inputDigit is not a function。我如何正確綁定this.inputDigit(digit)？

import React from 'react'; 
import './App.css'; 

export default class Calculator extends React.Component { 

// display of calculator initially zero 
state = { 
    displayValue: '0' 
} 

//click handler function 
inputDigit(digit){ 
    const { displayValue } = this.state; 
    this.setState({ 
    displayValue: displayValue+String(digit) 
    }) 
} 

componentDidMount(){ 

    //Get all number keys and attach click handler function 
    var numberKeys = document.getElementsByClassName("number-keys"); 
    var myFunction = function() { 
    var targetNumber = Number(this.innerHTML); 
    return this.inputDigit(targetNumber); // This is not working 
    }; 
    for (var i = 0; i < numberKeys.length; i++) { 
    numberKeys[i].onclick = myFunction; 
    } 

} 

render() { 
    const { displayValue } = this.state; 
    return (
    <div className="calculator"> 
     <div className="calculator-display">{displayValue}</div> 
     <div className="calculator-keypad"> 
     <div className="input-keys"> 

      <div className="digit-keys"> 
      {/*<button className="number-keys" onClick={()=> this.inputDigit(0)}>0</button> This will Work*/}} 
      <button className="number-keys">0</button>     
      <button className="number-keys1">1</button> 
      <button className="number-keys">2</button> 
      <button className="number-keys">3</button> 
      <button className="number-keys">4</button> 
      <button className="number-keys">5</button> 
      <button className="number-keys">6</button> 
      <button className="number-keys">7</button> 
      <button className="number-keys">8</button> 
      <button className="number-keys">9</button> 
      </div> 
     </div>   
     </div> 
    </div> 
) 
} 
} 

Answer 1

那是因爲你這是不綁定的功能，

使用裏面寫它

var myFunction = function() { 
    var targetNumber = Number(this.innerHTML); 
    return this.inputDigit(targetNumber); 
    }.bind(this); 

或

const myFunction =() => { 
    var targetNumber = Number(this.innerHTML); 
    return this.inputDigit(targetNumber); 
} 

此之後，你需要綁定的inputDigit功能以及因爲它也使用setState

//click handler function 
inputDigit = (digit) => { 
    const { displayValue } = this.state; 
    this.setState({ 
    displayValue: displayValue+String(digit) 
    }) 
} 

既然你要使用的按鈕上的文字爲好，在這種情況下，你應該使用一個單獨的變量代替this調用inputDigit功能類似

class Calculator extends React.Component { 
 

 
// display of calculator initially zero 
 
state = { 
 
    displayValue: '0' 
 
} 
 

 
//click handler function 
 
inputDigit(digit){ 
 
    const { displayValue } = this.state; 
 
    this.setState({ 
 
    displayValue: displayValue+String(digit) 
 
    }) 
 
} 
 

 
componentDidMount(){ 
 

 
    //Get all number keys and attach click handler function 
 
    var numberKeys = document.getElementsByClassName("number-keys"); 
 
    var that = this; 
 
    var myFunction = function() { 
 
    var targetNumber = Number(this.innerHTML); 
 
    console.log(targetNumber); 
 
    return that.inputDigit(targetNumber); // This is not working 
 
    }; 
 
    for (var i = 0; i < numberKeys.length; i++) { 
 
    numberKeys[i].onclick = myFunction; 
 
    } 
 

 
} 
 

 
render() { 
 
    const { displayValue } = this.state; 
 
    return (
 
    <div className="calculator"> 
 
     <div className="calculator-display">{displayValue}</div> 
 
     <div className="calculator-keypad"> 
 
     <div className="input-keys"> 
 

 
      <div className="digit-keys"> 
 
      {/*<button className="number-keys" onClick={()=> this.inputDigit(0)}>0</button> This will Work*/} 
 
      <button className="number-keys">0</button>     
 
      <button className="number-keys">1</button> 
 
      <button className="number-keys">2</button> 
 
      <button className="number-keys">3</button> 
 
      <button className="number-keys">4</button> 
 
      <button className="number-keys">5</button> 
 
      <button className="number-keys">6</button> 
 
      <button className="number-keys">7</button> 
 
      <button className="number-keys">8</button> 
 
      <button className="number-keys">9</button> 
 
      </div> 
 
     </div>   
 
     </div> 
 
    </div> 
 
) 
 
} 
 
} 
 

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

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

Answer 2

將其綁定在構造函數中

constructor(props) { 
    super(props); 
    this.inputDigit = this.inputDigit.bind(this); 
}