Come associare i gestori onclick a `this` correttamente su React

Spiegazione del motivo per cui questo non è un duplicato: il mio codice è già funzionante, ho incluso come commento. La domanda è: perché this contesto cambia quando lo includo alla funzione click handler.
Sto provando un progetto di calcolatrice in React. L’objective è di colbind i gestori onclick ai pulsanti numerici in modo che i numeri vengano visualizzati nell’area di visualizzazione della calcolatrice. Se il gestore viene scritto direttamente per rendere il metodo che sta funzionando, tuttavia, se sto provando da ComponentDidMount ottengo un errore this.inputDigit is not a function . Come posso associare this.inputDigit(digit) correttamente?

 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 ( 
{displayValue}
{/* This will Work*/}}
) } }