React实现3个及以上数字输入框自动求和并同步到总计输入框

核心实现思路 #

• 修正原有代码的语法错误：补全state初始化时缺失的冒号、修正JSX属性的书写格式
• 废弃原有的总计框点击触发计算逻辑，改为任意数字输入框值变化时自动触发求和，结果实时同步到总计框
• 输入框默认返回字符串类型值，求和前统一转成数值类型，空输入按0处理，避免出现字符串拼接、NaN等异常
• 总计输入框设置为只读，禁止用户手动修改计算结果

修正后可直接运行的完整代码 #

import React, { useState } from 'react'
import '../App.css'
function AddForm() {
  const [userData, setUserData] = useState({
    number1: '',
    number2: '',
    number3: '',
    total: ''
  })

  const postUserHandler = (e) => {
    const name = e.target.name
    const value = e.target.value
    // 先组装更新后的全量数据
    const updatedFormData = {
      ...userData,
      [name]: value
    }
    // 累加三个输入框的值，空值默认按0计算
    const sumTotal = 
      Number(updatedFormData.number1 || 0) + 
      Number(updatedFormData.number2 || 0) + 
      Number(updatedFormData.number3 || 0)
    updatedFormData.total = sumTotal
    // 统一更新状态
    setUserData(updatedFormData)
  }

  return(
    <>
      <input type="number" name='number1' value={userData.number1} onChange={postUserHandler} required />
      <input type="number" name='number2' value={userData.number2} onChange={postUserHandler} required />
      <input type="number" name='number3' value={userData.number3} onChange={postUserHandler} required />
      <input type="number" name='total' value={userData.total} readOnly required />
    </>
  )
}

export default AddForm

扩展说明 #

• 如果后续需要增加更多数字输入项，只需要在state中新增对应字段，求和逻辑中追加对应字段的数值计算即可；如果输入项数量不固定，也可以写遍历逻辑自动匹配所有number开头的字段累加，不需要逐个写字段名
• readOnly属性保留了输入框的表单提交能力，和disabled属性有区别，如果你的表单需要提交总计值，用只读比禁用更合适
• 数值转换时用|| 0做兼容，即使用户清空某个输入框，也不会导致求和结果变成NaN

内容的提问来源于stack exchange，提问作者Komal k