React循环生成TextField时的输入值存储与显示异常解决

原代码存在两个核心问题：

1. 把数组状态直接绑定到输入框的value上，导致输入框显示数组的字符串形式（比如["c","co"]），完全不符合输入框的显示预期。
2. handleInputValue每次将输入的中间内容（比如输入cow时的c、co）追加到数组，导致数组存储了大量无效的中间值，而非每个输入框的最终结果。

这种方案下，每个输入框对应数组的一个索引，输入时实时更新对应位置的值，数组始终存储每个输入框的当前值（最终即用户输入完成后的内容）。

代码示例 #

import { useState } from 'react';
import TextField from '@mui/material/TextField';

const MyComponent = () => {
  // 假设生成3个输入框，初始化状态为对应长度的空字符串数组
  const [inputValues, setInputValues] = useState(Array(3).fill(''));

  // 根据索引更新对应输入框的值
  const handleInputChange = (index, value) => {
    const newValues = [...inputValues];
    newValues[index] = value;
    setInputValues(newValues);
  };

  return (
    <div>
      {/* 循环生成TextField，每个绑定对应索引的状态 */}
      {inputValues.map((value, index) => (
        <TextField
          key={index}
          id={`standard-basic-${index}`}
          label={`输入框 ${index + 1}`}
          variant="standard"
          value={value}
          onChange={(e) => handleInputChange(index, e.target.value)}
          style={{ margin: '0 10px' }}
        />
      ))}
      <button onClick={() => console.log('最终输入值:', inputValues)}>查看结果</button>
    </div>
  );
};

export default MyComponent;

说明 #

• 初始化状态为输入框数量对应的空字符串数组，每个输入框绑定数组中对应索引的元素。
• 更新状态时复制原数组并修改对应位置的值，避免直接修改状态引发的React更新异常。
• 输入过程中输入框正常显示实时内容，数组同步存储当前输入值，用户输入完成后即为最终结果。

如果需要输入过程中输入框正常显示，但数组仅保留用户输入完成后的最终值（比如输入框失去焦点后才存储），可以用临时状态配合onBlur事件实现：

代码示例 #

import { useState } from 'react';
import TextField from '@mui/material/TextField';

const MyComponent = () => {
  // 存储所有最终输入值的数组
  const [finalInputValues, setFinalInputValues] = useState([]);
  // 临时存储每个输入框的实时输入内容
  const [tempInputs, setTempInputs] = useState({});

  // 实时更新临时输入值
  const handleTempInputChange = (index, value) => {
    setTempInputs(prev => ({ ...prev, [index]: value }));
  };

  // 输入框失去焦点时，将临时值存入最终数组
  const handleInputBlur = (index) => {
    const value = tempInputs[index] || '';
    const newFinalValues = [...finalInputValues];
    // 已有输入框则更新对应位置，新增则追加到数组
    if (index < newFinalValues.length) {
      newFinalValues[index] = value;
    } else {
      newFinalValues.push(value);
    }
    setFinalInputValues(newFinalValues);
  };

  // 自定义输入框数量
  const inputCount = 3;

  return (
    <div>
      {Array.from({ length: inputCount }).map((_, index) => (
        <TextField
          key={index}
          id={`standard-basic-${index}`}
          label={`输入框 ${index + 1}`}
          variant="standard"
          value={tempInputs[index] || ''}
          onChange={(e) => handleTempInputChange(index, e.target.value)}
          onBlur={() => handleInputBlur(index)}
          style={{ margin: '0 10px' }}
        />
      ))}
      <button onClick={() => console.log('最终存储值:', finalInputValues)}>查看结果</button>
    </div>
  );
};

export default MyComponent;

说明 #

• tempInputs临时存储输入框的实时内容，保证输入过程中输入框正常显示。
• onBlur事件触发时，将临时值存入finalInputValues数组，避免数组存储输入过程中的中间值。
• 支持动态调整输入框数量，只需修改inputCount或新增动态生成逻辑即可。

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