我怎么能设置onClicked按钮值到一个文本字段在reactjs(计算器)?

Question

最近刚刚学习了Reactjs，我正在尝试构建一个计算器，

下面的是App.js

中的函数代码

import './App.css';
function App() {
return (
<div className="App">
<div id="ans" className="answer">Ans = 0</div>
<input type="text" placeholder="0" className="inputid" id="result"/>
<hr/> 
{/* calculator buttons below */}

<button className="opbut">+</button>
<button className="opbut">-</button>
<button className="calbut">0</button>
<button className="calbut">1</button>
<button className="calbut">2</button>
<button className="calbut">3</button>
<button className="opbut">%</button>
<button className="ansbut">=</button>
<hr/>
<div className="appName">A Simple React Calculator - Jayflo</div>
</div>
);
}
export default App;

在每个按钮的onClick函数中，我希望它在单击时，它会显示单击按钮的值，并将其与文本字段中的剩余值连接起来…但是我没有得到它，在尝试了所有可能的解决方案后，我可以在网上找到…

我猜是由于react从class升级到function，大部分都贬值了，我猜。我对这个有点陌生，上网，看到旧的解决方案…

Answer 1

import './App.css';
export default function App() {
function handleClick(input) {
let buttonText = input.target.innerText;
let inputText = document.getElementById('result').value;
console.log(inputText + buttonText);
}
return (
<div className="App">
<div id="ans" className="answer">Ans = 0</div>
<input type="text" placeholder="0" className="inputid" id="result"/>
<hr/> 
{/* calculator buttons below */}

<button onClick={handleClick} className="opbut">+</button>
<button onClick={handleClick} className="opbut">-</button>
<button onClick={handleClick} className="calbut">0</button>
<button onClick={handleClick} className="calbut">1</button>
<button onClick={handleClick} className="calbut">2</button>
<button onClick={handleClick} className="calbut">3</button>
<button onClick={handleClick} className="opbut">%</button>
<button onClick={handleClick} className="ansbut">=</button>
<hr/>
<div className="appName">A Simple React Calculator - Jayflo</div>
</div>
);
}