React根据Select下拉选中值动态渲染对应数量表单字段实现方案

DevOps 小满

2026-8-26

问题场景

技术栈：React + MUI组件库，开发课程排期单组件CourseScheduleStep4
预期交互：课程总节数Select下拉框选中值为N时，页面渲染N组结构一致的表单字段组，单组字段包含class_date（课程日期）、class_start_time（上课开始时间）、class_end_time（上课结束时间）
现存问题：自定义的handleAddinput状态更新方法逻辑错误，无法生成长度与选中值匹配的inputList状态数组，动态渲染效果失效

常见错误逻辑

大部分同类问题都是以下写法问题导致：

没有以选中的节数为基准对齐数组长度，仅做简单的push追加逻辑，无法处理选中小值时删减表单项的场景
直接修改原inputList数组的引用，没有返回新的状态数组，React无法检测到状态变更触发重渲染
生成新表单项时直接复用同一个默认对象引用，导致多个表单项值联动错乱
动态渲染列表时没有配置稳定唯一key，引发MUI表单控件焦点丢失、值串位问题

修正实现

核心逻辑：监听总节数Select的变更事件，拿到目标节数后，对比当前inputList长度做对齐：目标长度更长就补全对应数量的空表单，目标长度更短就截断多余表单项，长度一致不做更新。调整过程中保留用户已经填写的有效内容。
完整可运行代码示例：

import { useState } from 'react';
import { Select, MenuItem, TextField, Box, FormControl, InputLabel } from '@mui/material';

// 单节课程表单默认值
const DEFAULT_CLASS_FORM = {
  class_date: '',
  class_start_time: '',
  class_end_time: ''
};

const CourseScheduleStep4 = () => {
  // 总节数，默认1节
  const [totalCount, setTotalCount] = useState(1);
  // 动态表单列表，初始1组默认字段
  const [inputList, setInputList] = useState([{ ...DEFAULT_CLASS_FORM }]);

  // 替换原有错误的handleAddinput方法
  const handleCountChange = (e) => {
    const target = Number(e.target.value);
    setTotalCount(target);

    setInputList(prev => {
      const currentLen = prev.length;
      if (currentLen === target) return prev;
      
      // 节数增加：补全对应数量的空表单
      if (target > currentLen) {
        const addArr = Array.from({ length: target - currentLen }, () => ({ ...DEFAULT_CLASS_FORM }));
        return [...prev, ...addArr];
      }

      // 节数减少：截断多余项，保留前面已填内容
      return prev.slice(0, target);
    });
  };

  // 更新单组表单内的字段值
  const handleItemChange = (index, field, val) => {
    setInputList(prev => {
      const list = [...prev];
      list[index] = { ...list[index], [field]: val };
      return list;
    });
  };

  return (
    <Box sx={{ padding: 2 }}>
      <FormControl fullWidth sx={{ marginBottom: 3 }}>
        <InputLabel id="class-count-label">课程总节数</InputLabel>
        <Select
          labelId="class-count-label"
          value={totalCount}
          label="课程总节数"
          onChange={handleCountChange}
        >
          {[1,2,3,4,5,6].map(num => (
            <MenuItem key={num} value={num}>{num}节</MenuItem>
          ))}
        </Select>
      </FormControl>

      {/* 动态渲染表单组 */}
      {inputList.map((item, idx) => (
        <Box 
          key={`class-form-${idx}`} 
          sx={{ 
            marginBottom: 2, 
            padding: 2, 
            border: '1px solid #f0f0f0', 
            borderRadius: 1 
          }}
        >
          <div style={{ marginBottom: 8 }}>第{idx + 1}节课</div>
          <TextField
            fullWidth
            type="date"
            label="课程日期"
            value={item.class_date}
            onChange={(e) => handleItemChange(idx, 'class_date', e.target.value)}
            sx={{ marginBottom: 2 }}
            InputLabelProps={{ shrink: true }}
          />
          <TextField
            fullWidth
            type="time"
            label="上课开始时间"
            value={item.class_start_time}
            onChange={(e) => handleItemChange(idx, 'class_start_time', e.target.value)}
            sx={{ marginBottom: 2 }}
            InputLabelProps={{ shrink: true }}
          />
          <TextField
            fullWidth
            type="time"
            label="上课结束时间"
            value={item.class_end_time}
            onChange={(e) => handleItemChange(idx, 'class_end_time', e.target.value)}
            InputLabelProps={{ shrink: true }}
          />
        </Box>
      ))}
    </Box>
  );
};

export default CourseScheduleStep4;

实现说明

所有状态更新都基于前序状态快照生成新数组，不直接修改原状态对象，保证React可以正常检测变更触发重渲染
新增表单项时对默认值做浅拷贝，避免多个表单项共用同一个对象引用导致值联动
动态列表使用稳定规则生成key，不要用随机数作为key，避免MUI输入控件焦点异常、值串位
调整节数时保留用户已填写的内容，不会因为节数变更清空所有输入，减少用户重复操作

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