无需Redux：React Final Form字段点击禁用/启用方案咨询

我当前使用以下函数渲染一组表单字段，字段的禁用状态完全依赖于Redux中的数据结构：

const renderFields = (data: CustomerDetails) => {
  return Object.keys(data).map((s: string) => {
    const key = s as keyof CustomerDetails
    return Object.keys(data[key]).map(fieldKey => {
      const name = `${key}.${fieldKey}`
      const id = `customer-details-form-${fieldKey}`
      return (
        <FormItem key={name}>
          <Label htmlFor={id}>{camelCaseToTitleCase(fieldKey)}</Label>
          <Field name={`${key}.${fieldKey}.value`} validate={validate(fieldKey)}>
            {props => <TextField disabled={
              data.contact[fieldKey] !== undefined ? data.contact[fieldKey].disabled : true
            }
            // disabled={
            //   data.contact[fieldKey]?.disabled ?? true
            // }
            {...props} data-bdd={`customer_details_field_${fieldKey}`} id={id} />}
          </Field>
        </FormItem>
      )
    })
  })
}

请问有没有办法实现点击切换字段的禁用/启用状态，而不需要通过分发Redux Action来指定字段状态？

当然可以！你可以通过组件本地状态来接管禁用状态的控制，初始时从Redux同步默认值，后续的切换操作完全在组件内部完成，无需触发任何Redux Action。下面是具体的实现思路和代码示例：

1. 在组件中添加本地状态管理禁用状态 #

首先，在包含renderFields函数的父组件里，用useState创建一个本地状态，初始值从Redux的data中同步而来：

import { useState, useEffect } from 'react';

// 假设这是你的组件
const CustomerDetailsForm = ({ data }: { data: CustomerDetails }) => {
  // 初始化本地禁用状态：从Redux数据中读取默认值
  const [localDisabledState, setLocalDisabledState] = useState<Record<string, boolean>>(() => {
    const initialState: Record<string, boolean> = {};
    Object.keys(data.contact).forEach(fieldKey => {
      initialState[fieldKey] = data.contact[fieldKey]?.disabled ?? true;
    });
    return initialState;
  });

  // 可选：如果Redux中的data可能更新，同步本地状态
  useEffect(() => {
    const updatedState: Record<string, boolean> = {};
    Object.keys(data.contact).forEach(fieldKey => {
      updatedState[fieldKey] = data.contact[fieldKey]?.disabled ?? true;
    });
    setLocalDisabledState(updatedState);
  }, [data.contact]);

  // ...后续代码
}

2. 修改renderFields函数，使用本地状态控制禁用 #

把原来依赖Redux的disabled判断换成本地状态，同时给每个字段添加切换触发点（比如点击标签切换，或者单独加个按钮）：

const renderFields = () => {
  return Object.keys(data).map((s: string) => {
    const key = s as keyof CustomerDetails;
    return Object.keys(data[key]).map(fieldKey => {
      const name = `${key}.${fieldKey}`;
      const id = `customer-details-form-${fieldKey}`;

      // 切换字段禁用状态的函数
      const toggleFieldDisabled = () => {
        setLocalDisabledState(prevState => ({
          ...prevState,
          [fieldKey]: !prevState[fieldKey]
        }));
      };

      return (
        <FormItem key={name} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          {/* 点击标签切换禁用状态，加个图标提示当前状态 */}
          <Label 
            htmlFor={id} 
            onClick={toggleFieldDisabled} 
            style={{ cursor: 'pointer', userSelect: 'none' }}
          >
            {camelCaseToTitleCase(fieldKey)}
            {localDisabledState[fieldKey] ? ' 🔒' : ' 🔓'}
          </Label>
          <Field name={`${key}.${fieldKey}.value`} validate={validate(fieldKey)}>
            {props => <TextField 
              disabled={localDisabledState[fieldKey]}
              {...props} 
              data-bdd={`customer_details_field_${fieldKey}`} 
              id={id} 
            />}
          </Field>
        </FormItem>
      );
    });
  });
};

3. 可选：同步本地状态到Redux（如果需要） #

如果后续需要把本地修改后的禁用状态保存回Redux，你可以在合适的时机（比如表单提交、用户确认）分发Action更新Redux数据，比如：

const handleSaveDisabledState = () => {
  // 假设你有对应的Redux Action Creator
  dispatch(updateCustomerFieldDisabledState(localDisabledState));
};

这种方式的核心是用组件本地状态接管了禁用状态的实时控制，初始值同步自Redux，后续切换完全在组件内部完成，不需要频繁触发Redux Action，既简化了操作逻辑，也避免了不必要的全局状态更新。

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