How to bind onclick handlers to `this` properly on React

by

Thats because you are writing it inside a function which is not bound,

Use

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

or

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

After this you need to bind the inputDigit function as well since it also uses setState

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

Since you want to use the button text as well, in that case you should use a separate variable in place of this to call the inputDigit function like

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>

More Related Contents:

  1. React: “this” is undefined inside a component function
  2. “this” is undefined inside map function Reactjs
  3. TypeError: Cannot read property ‘setState’ of undefined
  4. How does event handlers with arrow functions achieve context binding
  5. Javascript: Do I need to put this.var for every variable in an object?
  6. Why do we need middleware for async flow in Redux?
  7. How to avoid bind or inline arrow functions inside render method
  8. Make React useEffect hook not run on initial render
  9. Push method in React Hooks (useState)?
  10. Rendering raw html with reactjs
  11. Correct way to handle conditional styling in React
  12. Intercept/handle browser’s back button in React-router?
  13. Is it possible to share states between components using the useState() hook in React?
  14. react router doesn’t work in aws s3 bucket
  15. Why is immutability so important (or needed) in JavaScript?
  16. Multiple path names for a same component in React Router
  17. How do you send images to node js with Axios?
  18. setInterval in a React app
  19. Why IE 11 display blank page rendering react app
  20. Unable to use Arrow functions inside React component class [duplicate]
  21. How to disable button in React.js
  22. how to listen for route change in react-router-dom v6
  23. I can’t reference an image in Next.js
  24. Is there a way to render multiple React components in the React.render() function?
  25. How to create a protected route with react-router-dom?
  26. “You may need an additional loader to handle the result of these loaders.”
  27. React 18 strict mode causing component to render twice [duplicate]
  28. Reactjs-setState previous state is the first argument, props as the second argument
  29. Difference between React Component and React Element
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment