Javascript 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>
      )
    })
  })
}

const renderFields=（数据：CustomerDetails）=>{
返回Object.keys（数据）.map（（s:string）=>{
const key=s作为CustomerDetails的键
返回Object.key（数据[key]）.map（fieldKey=>{
常量名称=`${key}.${fieldKey}`
const id=`customer details form-${fieldKey}`
返回(
{camelCaseToTitleCase（字段键）}
{props=>
}
)
})
})
}

---

但是，禁用状态目前取决于redux结构。是否有一种方法可以在单击时禁用/启用字段，而不必发送一个操作说明哪些字段应该启用或不启用？

在此处使用本地状态是合适的。下面是一个简化的示例：

function WrappedField(props){
  const [disabled, setDisabled] = useState(false);
  return <Field {...props} disabled={disabled} onClick={() => setDisabled(!disabled)} />
}

函数包装字段（道具）{
const[disabled，setDisabled]=使用状态（false）；
return setDisabled（！disabled）}/>
}

---

您可以在任何使用字段组件的地方使用包装版本

您可以在本地组件的状态中短接相应的状态变量（并使用

useState（）

），而不是由Redux管理的全局状态。