React企业级动态表单值存储方案咨询：自定义onChange还是Redux？

Hey there! 针对你这个企业级动态表单的字段值收集问题，我来分享几个实用的实现思路，你可以根据项目的规模和复杂度来选择：

方案一：Props传递 + 父组件状态管理（适合中小规模项目） #

这是最轻量化的方案，不需要引入额外状态管理库，适合表单逻辑相对简单、不需要跨组件共享表单数据的场景：

1. 在表单的父容器组件中维护一个表单状态对象，比如 formValues，初始值可以是空对象，也可以从API返回的字段默认值初始化：

   const [formValues, setFormValues] = useState({});
   

2. 编写一个通用的handleChange函数，接收字段唯一标识（比如field.id）和新值，通过展开运算符更新状态：

   const handleChange = (fieldId, value) => {
     setFormValues(prevState => ({
       ...prevState,
       [fieldId]: value
     }));
   };
   

3. 在renderUiType.js中遍历字段时，把handleChange、当前字段的id以及对应的值传递给每个渲染的组件：

   // renderUiType.js 中的组件渲染逻辑
   export const renderComponent = (field, formValues, handleChange) => {
     const currentValue = formValues[field.id] ?? '';
     switch(field.uitype) {
       case 1:
         return (
           <TextField
             value={currentValue}
             onChange={(e) => handleChange(field.id, e.target.value)}
           />
         );
       case 2:
         return (
           <Checkbox
             checked={currentValue ?? false}
             onChange={(e) => handleChange(field.id, e.target.checked)}
           />
         );
       // 其他 uitype 对应的组件同理处理
     }
   };
   

4. 提交表单时，直接将formValues作为POST请求的请求体即可。

方案二：Redux 状态管理（适合大型复杂企业应用） #

如果你的项目是大型企业级应用，存在表单数据跨组件共享、多步骤表单、复杂业务逻辑等场景，用Redux（或者Redux Toolkit）来管理表单状态会更清晰：

1. 首先定义一个表单状态的slice，包含更新字段和重置表单的action：

   // formSlice.js
   import { createSlice } from '@reduxjs/toolkit';
   
   const formSlice = createSlice({
     name: 'dynamicForm',
     initialState: {},
     reducers: {
       updateField: (state, action) => {
         const { fieldId, value } = action.payload;
         state[fieldId] = value;
       },
       resetForm: () => ({})
     }
   });
   
   export const { updateField, resetForm } = formSlice.actions;
   export default formSlice.reducer;
   

2. 在renderUiType.js中，通过useSelector获取当前字段的值，用useDispatch分发更新字段的action：

   // renderUiType.js
   import { useSelector, useDispatch } from 'react-redux';
   import { updateField } from './formSlice';
   
   export const renderComponent = (field) => {
     const dispatch = useDispatch();
     const currentValue = useSelector(state => state.dynamicForm[field.id]);
   
     switch(field.uitype) {
       case 1:
         return (
           <TextField
             value={currentValue ?? ''}
             onChange={(e) => dispatch(updateField({ fieldId: field.id, value: e.target.value }))}
           />
         );
       case 2:
         return (
           <Checkbox
             checked={currentValue ?? false}
             onChange={(e) => dispatch(updateField({ fieldId: field.id, value: e.target.checked }))}
           />
         );
       // 其他组件逻辑
     }
   };
   

3. 提交表单时，从Redux store中取出dynamicForm状态作为请求体即可。

额外优化建议 #

• 考虑使用Formik等表单库：如果表单需要校验、错误提示等功能，Formik的useForm钩子可以很好地适配动态表单，它自带状态管理和通用的字段更新逻辑，能减少你自己写重复代码的工作量。
• 确保字段唯一标识：无论用哪种方案，每个字段必须有唯一的id或name属性，这是正确收集值的关键，避免出现字段值覆盖的问题。
• 嵌套字段处理：如果存在嵌套结构的动态字段，可以用类似user.address.street这样的字符串作为字段标识，更新状态时可以借助immer或者递归函数来处理嵌套对象的更新。

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