通过引用修改表单输入值的优化方案咨询

嘿，这个场景我太熟了！复杂嵌套表单手动维护状态确实容易写出一堆冗余代码，而且直接修改原状态对象的操作还可能埋下React更新不触发的坑，给你分享几个更优雅的解决方案：

1. 封装通用的柯里化更新函数（无第三方库） #

首先先修正个小问题：你之前直接修改source[field]再setItem(item)的方式是直接修改了原状态对象，React依赖状态的引用来判断是否更新，这种mutate操作很容易导致组件不渲染或者状态混乱。正确的做法是基于前状态创建新的不可变对象。

我们可以封装一个柯里化的处理函数，提前绑定字段路径，这样每个表单组件的onChange就变得非常简洁：

// 通用字段更新函数，支持嵌套路径
const handleFieldChange = (fieldPath) => (e, data) => {
  setItem(prevItem => {
    // 先深拷贝前状态，避免修改原对象（简单场景用JSON.parse/stringify，复杂场景推荐lodash.cloneDeep）
    const newItem = JSON.parse(JSON.stringify(prevItem));
    // 解析路径，比如把"instructions_data.subtitle"拆成父键和字段键
    const [parentKey, fieldKey] = fieldPath.split('.');
    // 用解构赋值更新嵌套字段，保证不可变性
    newItem[parentKey] = { ...newItem[parentKey], [fieldKey]: data.value };
    return newItem;
  });
};

使用的时候只需要传入字段路径就行，完全不用重复写回调逻辑：

<Form.Input 
  inline 
  label="Subtitle" 
  value={item.instructions_data.subtitle} 
  onChange={handleFieldChange('instructions_data.subtitle')} 
/>

如果你的嵌套层级更深（比如a.b.c），可以把路径解析改成递归或者用lodash.set来处理，代码会更通用。

2. 用React Hook Form彻底解放双手 #

如果表单结构特别复杂，直接用专门的表单状态管理库会更省心，React Hook Form就是个绝佳选择——它不需要你手动维护状态，通过register函数就能自动绑定字段，性能也更好（基于非受控组件思路，减少不必要重渲染）：

import { useForm } from 'react-hook-form';

function MyComplexForm() {
  // 初始化表单默认值
  const { register, handleSubmit } = useForm({
    defaultValues: {
      instructions_data: {
        subtitle: '',
        // 其他嵌套字段...
      }
    }
  });

  // 提交时直接拿到完整的表单数据
  const onSubmit = (formData) => {
    console.log('表单数据:', formData);
    // 这里可以做提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Form.Input 
        inline 
        label="Subtitle" 
        {...register('instructions_data.subtitle')} 
      />
      {/* 其他表单字段只需要重复register对应的路径就行 */}
      <button type="submit">提交表单</button>
    </form>
  );
}

这个方案几乎不用自己写任何状态更新逻辑，表单的校验、状态管理全交给库处理，非常适合复杂表单场景。

3. 用Immer简化不可变更新 #

如果不想引入完整的表单库，但又觉得手动拷贝对象太麻烦，可以用Immer库——它允许你“假装”直接修改状态，背后会帮你生成不可变的新对象，代码会更直观：

import { produce } from 'immer';

const handleFieldChange = (fieldPath) => (e, data) => {
  setItem(prevItem => produce(prevItem, draft => {
    // 直接修改draft就行，Immer会自动处理成不可变更新
    const [parentKey, fieldKey] = fieldPath.split('.');
    draft[parentKey][fieldKey] = data.value;
    // 深层嵌套的话直接写 draft.a.b.c = data.value 就行
  }));
};

使用方式和第一个方案完全一样，但代码更简洁，不用手动处理对象拷贝和解构。

最后回答你关于“从onChange事件获取引用对象”的问题：事件对象里只有输入值、目标元素这些信息，没办法直接拿到绑定的状态对象引用，所以还是得通过提前绑定字段路径的方式来处理，上面的几个方案都是基于这个思路优化的。

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