onclickハンドラを `this 'に正しくバインドするにはReact

Question

これは重複しない理由の説明：私のコードはすでに動作していますが、私はコメントに含めました。問題は、クリックハンドラ機能に含めるとコンテキストが変更される理由です。
私は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) 
    }) 
} 

あなたは、あなたがそれをバインド

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

ようinputDigit関数を呼び出すためにthisの代わりに別の変数を使用する必要があり、その場合には、同様にボタンのテキストを使用したいので、コンストラクタ内の

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