React新手求助：如何实现下拉切换87种设备的动态专属表单

核心思路是配置化驱动表单渲染，把87种设备的表单结构、校验规则抽象成配置对象，无需为每个设备单独编写组件。以下是结合react-hooks-form和yup的具体实现示例：

1. 定义设备表单配置文件 #

创建一个配置文件（比如deviceFormConfigs.js），将每个设备的表单字段、校验规则统一管理：

import * as yup from 'yup';

// 每个设备ID对应其专属表单配置
export const deviceFormConfigs = {
  1: {
    label: "X设备",
    fields: [
      { name: "serialNumber", type: "text", label: "设备序列号", placeholder: "请输入序列号" },
      { name: "temperature", type: "number", label: "实时温度", placeholder: "请输入温度值" }
    ],
    validationSchema: yup.object().shape({
      serialNumber: yup.string().required("序列号不能为空"),
      temperature: yup.number().min(0).max(100).required("温度不能为空")
    })
  },
  2: {
    label: "Y设备",
    fields: [
      { name: "pressure", type: "number", label: "压力值", placeholder: "请输入压力" },
      { name: "batteryLevel", type: "number", label: "电池电量", placeholder: "0-100" }
    ],
    validationSchema: yup.object().shape({
      pressure: yup.number().positive("压力必须为正数").required("压力不能为空"),
      batteryLevel: yup.number().min(0).max(100).required("电量不能为空")
    })
  },
  // 剩余85种设备的配置按此格式扩展...
};

2. 通用表单字段子组件（FormField） #

创建一个复用的子组件，统一渲染不同类型的表单控件：

import React from 'react';
import { Controller } from 'react-hook-form';

export const FormField = ({ control, field }) => {
  const { name, type, label, placeholder } = field;

  return (
    <div style={{ marginBottom: '16px' }}>
      <label htmlFor={name}>{label}</label>
      <Controller
        name={name}
        control={control}
        render={({ field: { onChange, value }, fieldState: { error } }) => (
          <>
            <input
              type={type}
              id={name}
              value={value || ''}
              onChange={onChange}
              placeholder={placeholder}
              style={{ marginLeft: '8px', padding: '4px' }}
            />
            {error && <p style={{ color: 'red', margin: '4px 0 0 0' }}>{error.message}</p>}
          </>
        )}
      />
    </div>
  );
};

3. 主组件实现下拉选择与动态表单渲染 #

在主组件中实现设备选择、动态加载表单配置与校验：

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { deviceFormConfigs } from './deviceFormConfigs';
import { FormField } from './FormField';

const DeviceForm = () => {
  const [selectedDeviceId, setSelectedDeviceId] = useState('');
  const currentConfig = selectedDeviceId ? deviceFormConfigs[selectedDeviceId] : null;

  // 动态生成表单配置与校验规则
  const { control, handleSubmit, formState: { errors } } = useForm({
    resolver: currentConfig ? yupResolver(currentConfig.validationSchema) : undefined,
    defaultValues: currentConfig 
      ? currentConfig.fields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {})
      : {}
  });

  const onSubmit = (data) => {
    console.log(`提交${currentConfig.label}数据:`, data);
    // 这里添加提交到后端的逻辑
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>设备表单</h3>
      {/* 设备下拉选择器 */}
      <select
        value={selectedDeviceId}
        onChange={(e) => setSelectedDeviceId(e.target.value)}
        style={{ padding: '4px', marginBottom: '20px' }}
      >
        <option value="">请选择设备</option>
        {Object.entries(deviceFormConfigs).map(([id, config]) => (
          <option key={id} value={id}>{config.label}</option>
        ))}
      </select>

      {/* 动态渲染选中设备的表单 */}
      {currentConfig && (
        <form onSubmit={handleSubmit(onSubmit)}>
          {currentConfig.fields.map((field) => (
            <FormField key={field.name} control={control} field={field} />
          ))}
          <button type="submit" style={{ padding: '6px 12px' }}>提交</button>
        </form>
      )}
    </div>
  );
};

export default DeviceForm;

关键逻辑说明 #

• 配置化管理：所有设备的表单结构和校验规则都集中在deviceFormConfigs中，新增或修改设备只需更新配置，无需修改组件代码。
• 动态校验：通过yupResolver动态传入当前选中设备的validationSchema，实现表单校验的自动切换。
• 复用子组件：FormField组件统一处理不同类型的表单控件，避免重复编写输入框、错误提示等代码。

后续优化建议：

• 可以把配置文件从前端移到后端接口，通过接口拉取设备表单配置，更灵活地支持设备新增或修改。
• 扩展FormField组件，支持更多表单控件类型（如下拉框、单选框等），满足不同设备的字段需求。

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