React中如何汇总多个组件输入值并计算总和？

你的核心需求是实现多个数字输入框的值求和，同时解决子组件状态重置的问题。目前代码存在两个关键问题：

• 子组件独立维护状态，父组件无法获取各输入框的值来计算总和
• 尝试通过回调传递值时出现状态重置，本质是非受控组件的状态与父组件状态不同步，或是父组件重渲染触发了子组件不必要的初始化

以下是最优解决方案：将所有输入框的状态统一托管到父组件（受控组件模式），既避免状态重置，又能轻松计算总和。

修改后的代码 #

App.js #

import "./App.css";
import { useState, useEffect } from "react";
import UserInput from "./UserInput";

function App() {
  // 用对象存储所有输入框的状态，key对应每个输入框的唯一标识
  const [inputValues, setInputValues] = useState({
    Input1: 12,
    Input2: 15,
    Input3: 9
  });
  const [total, setTotal] = useState(0);

  // 监听输入值变化，自动计算总和
  useEffect(() => {
    const sum = Object.values(inputValues).reduce((acc, curr) => acc + curr, 0);
    setTotal(sum);
  }, [inputValues]);

  // 子组件调用的更新函数，传递输入框标识和新值
  const handleInputUpdate = (inputKey, newValue) => {
    setInputValues(prev => ({
      ...prev,
      [inputKey]: newValue
    }));
  };

  return (
    <div className="App">
      <p>总和：{total}</p>
      <table>
        <tbody>
          <tr>
            <UserInput 
              key="Input1" 
              inputKey="Input1"
              value={inputValues.Input1} 
              onUpdate={handleInputUpdate} 
            />
            <UserInput 
              key="Input2" 
              inputKey="Input2"
              value={inputValues.Input2} 
              onUpdate={handleInputUpdate} 
            />
            <UserInput 
              key="Input3" 
              inputKey="Input3"
              value={inputValues.Input3} 
              onUpdate={handleInputUpdate} 
            />
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default App;

UserInput.js #

import React from "react";

export default function UserInput({ inputKey, value, onUpdate }) {
  function handleKeyDown(event) {
    if (event.key === "Enter") {
      const numValue = parseInt(event.target.value);
      if (!isNaN(numValue)) {
        // 调用父组件的更新函数同步状态
        onUpdate(inputKey, numValue);
      }
    }
  }

  return (
    <td>
      {/* 受控组件：输入框值完全由父组件传入的value控制 */}
      <input 
        type="number" 
        value={value} 
        onKeyDown={handleKeyDown}
        {/* 可选：添加onChange实现实时同步，无需等待回车 */}
        onChange={(e) => {
          const num = parseInt(e.target.value);
          if (!isNaN(num)) onUpdate(inputKey, num);
        }}
      />
      <p>{value}</p>
    </td>
  );
}

关键说明 #

1. 状态统一托管：父组件用inputValues对象集中管理所有输入框的值，每个输入框对应唯一inputKey，彻底避免状态分散导致的不同步问题。
2. 受控组件模式：子组件不再维护自身state，输入框值完全由父组件传入的value控制，从根源上解决状态重置问题。
3. 自动求和逻辑：通过useEffect监听inputValues变化，每次状态更新时自动计算并更新总和。
4. 回调优化：handleInputUpdate使用函数式更新（prev => {...}），确保获取最新状态值，避免闭包陷阱。

如果坚持让子组件维护自身状态（不推荐，会增加父组件求和的复杂度），可通过以下方式避免重置：

• 确保子组件的key固定不变（你当前代码已满足）
• 用useCallback缓存父组件的回调函数，避免每次重渲染创建新函数触发子组件不必要更新：

  import { useCallback } from "react";
  const handleInputUpdate = useCallback((inputKey, newValue) => {
    setInputValues(prev => ({...prev, [inputKey]: newValue}));
  }, []);
  

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