如何在React上将onclick处理程序正确绑定到`this`

小编典典

如何在React上将onclick处理程序正确绑定到`this`

reactjs

解释为什么这不是重复的：我的代码已经在工作，我已作为注释包含在内。问题是为什么将this上下文包含在单击处理程序函数中时上下文会发生变化。
我正在React中尝试一个计算器项目。目的是将onclick处理程序附加到数字按钮，以便数字显示在计算器显示区域上。如果将处理程序直接编写为render方法，则它可以正常工作，但是，如果我尝试从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>
  )
 }
}

阅读 216

2020-07-22

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

2020-07-22