ReactJS计算器开发：如何将点击按钮的值拼接显示到输入框

React 16.8之后的函数组件统一使用Hook管理状态，无需使用类组件的this.state相关语法，按以下步骤修改即可实现需求：

• 第一步：从react包中导入useState Hook，用于管理输入框的内容状态
• 第二步：在App组件内部定义状态变量存储输入值，同时编写按钮点击的处理函数
• 第三步：给每个按钮绑定onClick事件，传入按钮对应的文本值，同时将输入框的value属性绑定到定义的状态变量

完整修改后的代码如下：

import './App.css';
import { useState } from 'react';

function App() {
  // 定义输入框内容的状态
  const [inputVal, setInputVal] = useState('');

  // 按钮点击处理函数
  const handleButtonClick = (value) => {
    // 拼接新的内容到原有内容末尾
    setInputVal(prevVal => prevVal + value);
  };

  return (
    <div className="App">
      <div id="ans" className="answer">Ans = 0</div>
      {/* 输入框绑定value为状态值，readOnly属性可按需删除，删除后需补充onChange事件同步手动输入的内容 */}
      <input 
        type="text" 
        placeholder="0" 
        className="inputid" 
        id="result" 
        value={inputVal}
        readOnly
      />
      <hr/> 
      {/* calculator buttons below */}
     
      <button className="opbut" onClick={() => handleButtonClick('+')}>+</button>
      <button className="opbut" onClick={() => handleButtonClick('-')}>-</button>
      <button className="calbut" onClick={() => handleButtonClick('0')}>0</button>
      <button className="calbut" onClick={() => handleButtonClick('1')}>1</button>
      <button className="calbut" onClick={() => handleButtonClick('2')}>2</button>
      <button className="calbut" onClick={() => handleButtonClick('3')}>3</button>
      <button className="opbut" onClick={() => handleButtonClick('%')}>%</button>
      <button className="ansbut">=</button>
      <hr/>
      <div className="appName">A Simple React Calculator - Jayflo</div>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Mira BeeCalifonia