动态添加输入框并跟踪用户输入内容的实现方案咨询

这问题我之前做项目时也碰到过——固定数量的state确实搞不定动态生成的输入框，给你个简单靠谱的方案：用单一的state对象来统一管理所有输入框的值，每个输入框对应分类的_id作为键，不管生成多少个输入框都能轻松跟踪。

具体实现思路 #

1. 用一个对象类型的state存储所有输入值，键用分类的_id（比索引更可靠，避免分类顺序变化导致的混乱），值是对应输入框的内容。
2. 给每个动态生成的输入框绑定value和onChange事件，通过_id定位到对应的state字段进行更新。

修改后的完整代码示例 #

import { useState, useEffect } from 'react';

const YourComponent = ({ newData }) => {
  // 初始化state：遍历分类数据，用每个分类的_id作为键，初始值为空字符串
  const [inputValues, setInputValues] = useState(() => {
    return newData.reduce((acc, category) => {
      acc[category._id] = '';
      return acc;
    }, {});
  });

  // 处理输入变化的通用函数
  const handleInputChange = (categoryId, inputValue) => {
    setInputValues(prevState => ({
      ...prevState,
      [categoryId]: inputValue
    }));
  };

  // 如果分类数据是动态更新的（比如API请求后变化），同步更新state
  useEffect(() => {
    const updatedValues = newData.reduce((acc, category) => {
      // 保留已输入的值，新增的分类设为空字符串
      acc[category._id] = inputValues[category._id] || '';
      return acc;
    }, {});
    setInputValues(updatedValues);
  }, [newData]);

  const categories = newData.map((category) => {
    return (
      <div className="content row marginCenter" key={category._id}>
        <p>{category.category}</p>
        <input
          type="text"
          // 绑定对应分类的输入值，兜底空字符串避免报错
          value={inputValues[category._id] || ''}
          onChange={(e) => handleInputChange(category._id, e.target.value)}
          placeholder={`请输入${category.category}的内容`}
        />
      </div>
    );
  });

  return <div>{categories}</div>;
};

export default YourComponent;

方案优势 #

• 不需要为每个输入框单独创建state，代码更简洁易维护
• 用分类的_id作为键，比依赖数组索引更稳定（比如分类新增、删除或排序变化时不会出错）
• 后续提交或处理数据时，直接遍历inputValues对象就能拿到所有分类对应的输入内容，比如：

  // 打印所有输入值
  Object.entries(inputValues).forEach(([categoryId, value]) => {
    console.log(`分类ID ${categoryId} 的输入值：${value}`);
  });
  

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