React添加新行后输入框仅能逐字符输入且失焦问题求助

这个问题我之前也碰到过，核心原因是每次状态更新后，你的输入框组件被React重新创建了，而不是复用原有组件，自然输入一次就失焦了。咱们一步步拆解解决办法，适配你想保留的「用null占位」的方案：

问题根源 #

当你往state里追加null并重新渲染时，如果没有给每个输入框设置稳定且唯一的key，React无法识别哪些组件是需要复用的。它会把旧的输入框卸载，再挂载新的输入框——这就导致输入焦点直接丢失。另外，如果你用数组索引作为key，虽然追加时索引看似不变，但状态更新后组件的渲染上下文变化，也可能触发重新挂载。

适配你方案的解决步骤 #

1. 给每个输入项绑定稳定的唯一标识 #

把你的state从纯null数组，改成包含「唯一ID+null值」的对象数组。这样每个输入项都有专属的身份标识，React能精准复用它：

// 初始state：用带id的对象包裹null
const [inputs, setInputs] = useState([{ id: 'input-1', value: null }]);

2. 新增输入项时生成新的唯一ID #

点击「添加新行」时，给新的null项分配一个不会重复的ID（比如时间戳、自增数字都可以）：

const addNewRow = () => {
  setInputs(prev => [...prev, { id: `input-${Date.now()}`, value: null }]);
};

3. 渲染时用唯一ID作为key，处理null值的显示 #

map渲染输入框时，用item.id作为key，同时把null值转为空字符串（避免输入框显示"null"文本）：

{inputs.map(item => (
  <input
    key={item.id} // 关键：稳定的key
    type="text"
    value={item.value || ''} // 把null转为空字符串
    onChange={(e) => handleInputChange(item.id, e.target.value)}
  />
))}

4. 正确更新对应项的状态 #

修改输入值时，找到对应ID的项更新，保持state的不可变性：

const handleInputChange = (id, newValue) => {
  setInputs(prev => 
    prev.map(item => 
      item.id === id ? { ...item, value: newValue } : item
    )
  );
};

完整示例代码 #

import { useState } from 'react';

function App() {
  const [inputs, setInputs] = useState([{ id: 'input-1', value: null }]);

  const addNewRow = () => {
    setInputs(prev => [...prev, { id: `input-${Date.now()}`, value: null }]);
  };

  const handleInputChange = (id, newValue) => {
    setInputs(prev => 
      prev.map(item => 
        item.id === id ? { ...item, value: newValue } : item
      )
    );
  };

  return (
    <div className="App">
      {inputs.map(item => (
        <input
          key={item.id}
          type="text"
          value={item.value || ''}
          onChange={(e) => handleInputChange(item.id, e.target.value)}
          style={{ margin: '5px' }}
        />
      ))}
      <button onClick={addNewRow} style={{ marginLeft: '5px' }}>
        添加新行
      </button>
    </div>
  );
}

export default App;

这样调整后，输入框就能正常输入、不会再频繁失焦了——既保留了你用null占位的思路，又解决了React组件复用的问题。

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