ReactJS输入框无法连续输入，光标频繁丢失问题求助

核心问题原因 #

1. 属性传递错误：父组件中PoolSize的attributes统一传了condattributes，而非当前循环项condition的attributes，导致所有输入项共享同一数据源，输入时触发全局重渲染，光标丢失。
2. 索引作为key的不良实践：用数组索引生成组件/输入框的key，当数组元素增删或状态更新时，React会错误复用组件，导致输入状态丢失、光标跳失。
3. 状态更新违反不可变原则：onChangeHandler中仅对数组做浅拷贝，直接修改原对象的attributes属性，触发不必要的重渲染。

修复步骤与代码示例 #

1. 修复父组件属性传递与key

给每个condition项添加唯一标识（比如新增时用Date.now()生成id），替换索引作为key，并绑定当前项的attributes：

<>
<form onSubmit={optimizeHandler}>
  <div className="filter-container">
    {conditions.map((condition, index) => {
      return (
        <PoolSize
          onDeleteHandler={deleteCondition}
          onChangeHandler={onChangeHandler}
          onSelectHandler={onSelectConditionHandler}
          key={condition.id} {/* 使用唯一id替代index */}
          d_key={index}
          attributes={condition.attributes} {/* 绑定当前项的属性 */}
          columns={selectedColumns}
        />
      );
    })}
  </div>
</>

2. 修复状态更新逻辑

严格遵循React状态不可变原则，通过深拷贝更新指定项的属性：

const onChangeHandler = (key, event) => {
  setConditions((prevConditions) => {
    return prevConditions.map((item, idx) => {
      if (idx === key) {
        return {
          ...item,
          attributes: {
            ...item.attributes,
            [event.target.name]: validateInput(event.target.name, event.target.value)
          }
        };
      }
      return item;
    });
  });
};

3. 修复PoolSize组件的DOM标识问题

避免重复id，确保label与input正确绑定：

<div className="container" name="Pool Size">
  <label htmlFor={`pool_size_${d_key}`}>Max Pool Amount is </label>
  <input
    id={`pool_size_${d_key}`}
    name="pool_size_number"
    type="number"
    placeholder="100000"
    key={`pool_size_${d_key}`}
    onInput={(event) => onChangeHandler(d_key, event)}
    value={attributes.pool_size_number}
  />
</div>

总结 #

• 每个输入项必须绑定独立的数据源，避免全局共享导致的重渲染
• 用唯一标识替代数组索引作为组件key，保证组件身份稳定
• 状态更新时必须创建新对象/数组，禁止直接修改原状态引用
• 确保DOM元素id唯一，避免标签与输入框绑定错误

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