最近刚学习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 函数中，我希望它在单击时显示单击的按钮的值并将其与文本字段中的其余值连接起来......但我没有得到它，在尝试了所有可能的方法之后我可以在网上找到解决方案...
我猜这是由于反应从类升级到功能，我猜大多数都折旧了。我对此有点陌生，上网，看到旧的解决方案......
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>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句