React函数式组件中动态数量输入元素的处理方案

1. 虚拟列表+受控组件（优先推荐） #

数千条元素直接渲染DOM才是性能瓶颈，而非数组状态本身——React处理数组状态更新的开销远小于渲染上千个DOM节点。

用虚拟列表库（比如react-window或react-virtualized）只渲染可视区域内的输入框，把DOM数量控制在几十条以内，同时依然用数组维护所有输入值的状态。这种方案既符合React状态驱动的范式，又彻底解决性能问题：

import { FixedSizeList as List } from 'react-window';

const InputList = ({ inputs, setInputs }) => {
  const handleChange = (index, e) => {
    setInputs(prev => {
      const newInputs = [...prev];
      newInputs[index] = e.target.value;
      return newInputs;
    });
  };

  const Row = ({ index, style }) => (
    <div style={style}>
      <input
        value={inputs[index]}
        onChange={(e) => handleChange(index, e)}
      />
    </div>
  );

  return (
    <List
      height={400}
      itemCount={inputs.length}
      itemSize={30}
      width="100%"
    >
      {Row}
    </List>
  );
};

2. 使用Ref集合替代DOM ID #

不用通过ID查询DOM，而是用useRef存储所有输入框的引用，访问更直接也更可靠：

import { useRef } from 'react';

const WithdrawInputs = ({ count }) => {
  const inputRefs = useRef({});

  // 示例：获取指定索引的输入值
  const getInputValue = (index) => {
    return inputRefs.current[`input_${index}`]?.value;
  };

  return (
    <div>
      {Array.from({ length: count }).map((_, index) => (
        <input
          key={index}
          ref={el => inputRefs.current[`input_${index}`] = el}
          placeholder={`输入 ${index + 1}`}
        />
      ))}
    </div>
  );
};

3. 利用表单的name属性 #

给每个输入框设置唯一的name，通过表单元素的elements属性直接访问，不用手动管理ID：

const WithdrawForm = ({ count }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    // 获取所有输入值
    const values = Array.from({ length: count }).map((_, index) => {
      return e.target.elements[`withdraw_input_${index}`].value;
    });
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit}>
      {Array.from({ length: count }).map((_, index) => (
        <input
          key={index}
          name={`withdraw_input_${index}`}
          placeholder={`输入 ${index + 1}`}
        />
      ))}
      <button type="submit">提交</button>
    </form>
  );
};

4. 优化受控组件的状态更新 #

如果坚持用全量数组状态但担心性能，用函数式更新配合React.memo包裹输入组件，减少不必要的重渲染：

import { memo, useState, useCallback } from 'react';

const InputItem = memo(({ value, onChange, index }) => {
  return <input value={value} onChange={(e) => onChange(index, e)} />;
});

const WithdrawInputs = ({ count }) => {
  const [inputs, setInputs] = useState(Array(count).fill(''));

  const handleChange = useCallback((index, e) => {
    setInputs(prev => {
      const newInputs = [...prev];
      newInputs[index] = e.target.value;
      return newInputs;
    });
  }, []);

  return (
    <div>
      {inputs.map((value, index) => (
        <InputItem
          key={index}
          value={value}
          onChange={handleChange}
          index={index}
        />
      ))}
    </div>
  );
};

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