React表单：切换Type后自动设置字段默认值（无需OnChange触发）

需求梳理 #

• 表单初始值通过API从数据库拉取，支持下拉框切换typeId（可选值1-5）
• typeId=5时：隐藏correctable（ToggleSwitch）和tagCriteria（RadioGroup）字段，字段值设为null
• typeId切换为1-4时：显示上述两个字段，自动设置correctable=0、tagCriteria=1000，且允许用户手动修改
• 联动逻辑：
  • correctable=0时，将tagCriteria置为null并禁用RadioGroup
  • correctable切换为1时，启用RadioGroup并自动设置tagCriteria=1000

解决方案代码 #

import React, { useState, useEffect } from 'react';

// 定义表单值类型，替代any提升类型安全
interface FormValues {
  name?: string;
  typeId?: number;
  correctable?: number;
  tagCriteria?: number | null;
}

const YourFormComponent = () => {
  const [values, setValues] = useState<FormValues>({});
  const radioItems = [/* 你的Radio选项配置 */];

  // 处理输入变更，包含correctable联动逻辑
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    let newValues = { ...values };

    // 处理correctable切换的联动逻辑
    if (name === 'correctable') {
      const correctableVal = parseInt(value, 10);
      newValues.correctable = correctableVal;
      newValues.tagCriteria = correctableVal === 1 ? 1000 : null;
    } else {
      // 常规字段赋值，typeId转为数字类型
      newValues[name as keyof FormValues] = name === 'typeId' ? parseInt(value, 10) : value;
    }

    setValues(newValues);
  };

  // 监听typeId变化，自动设置/清空对应字段
  useEffect(() => {
    if (values.typeId) {
      if (values.typeId !== 5) {
        // 切换到1-4时，自动填充默认值（保留用户已修改的内容）
        setValues(prev => ({
          ...prev,
          correctable: prev.correctable ?? 0,
          tagCriteria: prev.tagCriteria ?? 1000
        }));
      } else {
        // 切换到5时，清空字段
        setValues(prev => ({
          ...prev,
          correctable: null,
          tagCriteria: null
        }));
      }
    }
  }, [values.typeId]);

  // API获取初始值逻辑示例（按需添加）
  // useEffect(() => {
  //   fetchInitialData().then(data => setValues(data));
  // }, []);

  return (
    <form>
      <Input
        type='text'
        onChange={handleInputChange}
        name='name'
        label='Name'
        value={values.name || ''}
        error={errors?.name}
      />
      <Dropdown
        onChange={handleInputChange}
        label='Type'
        name='typeId'
        value={values.typeId?.toString() || ''}
        prompt='Select A Type...'
        url={TypesURL}
      />
      {/* typeId不为5时显示ToggleSwitch和RadioGroup */}
      {values.typeId !== 5 && (
        <>
          <ToggleSwitch
            onChange={handleInputChange}
            label1='No'
            label2='Yes'
            name='correctable'
            value={values.correctable?.toString() || '0'}
          />
          <RadioGroup
            onChange={handleInputChange}
            items={radioItems}
            name='tagCriteria'
            value={values.tagCriteria?.toString() || ''}
            disabled={values.correctable === 0}
          />
        </>
      )}
    </form>
  );
};

export default YourFormComponent;

关键逻辑说明 #

1. 类型约束：用FormValues接口替代any，避免类型混乱
2. typeId监听：通过useEffect监听类型切换，自动填充/清空对应字段，??运算符确保用户已修改的值不会被覆盖
3. correctable联动：在输入变更函数中直接处理correctable的切换逻辑，同步tagCriteria的值并控制RadioGroup禁用状态
4. 值类型适配：将数字类型字段转为字符串，适配表单组件的value属性要求

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