如何在React中跟踪动态用户列表的输入值？

针对你动态生成用户列表输入框并需要跟踪值的需求，下面提供两种实用的实现方式，优先推荐受控组件方案：

一、受控组件（推荐） #

将每个输入框的值绑定到React状态中，通过onChange事件实时更新状态，这是React中处理表单输入的标准方式，能实时跟踪值变化，且适配列表动态变更的场景。

实现步骤： #

1. 初始化状态：根据用户列表初始化输入值状态，用对象存储（以用户唯一ID为键，避免列表顺序变化导致值错位）：

const [inputValues, setInputValues] = useState({});

2. 同步用户列表变更：当用户列表新增/删除时，同步更新状态，保留已有用户的输入值：

useEffect(() => {
  const initialVals = {};
  users.forEach(user => {
    // 若用户已有输入值则保留，否则设为空字符串
    initialVals[user.id] = inputValues[user.id] ?? "";
  });
  setInputValues(prev => ({ ...prev, ...initialVals }));
}, [users]);

3. 渲染输入框：为每个输入框绑定value和onChange：

users.map((user) => (
  <input
    key={user.id} // 必须用用户唯一ID作为key，不能用索引
    type="text"
    placeholder={user.name}
    value={inputValues[user.id] || ""}
    onChange={(e) => {
      // 实时更新对应用户的输入值
      setInputValues(prev => ({
        ...prev,
        [user.id]: e.target.value
      }));
    }}
  />
))

如果用户没有唯一ID，也可以用索引，但要注意列表顺序变化可能导致值错位，此时状态用数组：

const [inputValues, setInputValues] = useState(users.map(() => ""));

useEffect(() => {
  // 列表长度变化时调整状态数组长度
  setInputValues(prev => {
    const newVals = [...prev];
    while (newVals.length < users.length) newVals.push("");
    return newVals.slice(0, users.length);
  });
}, [users]);

// 渲染
users.map((user, idx) => (
  <input
    key={idx}
    type="text"
    placeholder={user.name}
    value={inputValues[idx]}
    onChange={(e) => {
      const newVals = [...inputValues];
      newVals[idx] = e.target.value;
      setInputValues(newVals);
    }}
  />
))

二、非受控组件（使用Ref） #

如果不需要实时跟踪值，仅在提交等场景获取值，可以用Ref存储每个输入框的引用。注意不能用单个Ref，需要用对象/数组存储多个Ref：

const inputRefs = useRef({});

// 渲染输入框
users.map((user) => (
  <input
    key={user.id}
    type="text"
    placeholder={user.name}
    ref={el => inputRefs.current[user.id] = el} // 用用户ID作为键存储Ref
  />
))

// 获取所有输入值的方法（比如提交时调用）
const getAllInputValues = () => {
  const values = {};
  users.forEach(user => {
    values[user.id] = inputRefs.current[user.id]?.value || "";
  });
  return values;
};

这种方式的缺点是无法实时响应值变化，状态不在React的状态管理体系中，仅适合简单场景。

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