React 最终形式禁用没有 redux 的字段答案

【问题标题】：React final form disables fields without reduxReact 最终形式禁用没有 redux 的字段
【发布时间】：2020-01-30 13:45:36
【问题描述】：

我有以下函数可以呈现一组字段：

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 结构。有没有一种方法可以在点击时禁用/启用字段，而无需发送操作说明应该启用哪些字段？

【问题讨论】：

您可以在本地组件的状态中短路相应的状态变量（并使用useState() 管理它），而不是由 Redux 管理的全局状态。

标签： javascript reactjs redux react-final-form

【解决方案1】：

在这里使用本地状态是合适的。这是一个简化的示例：

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

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

【讨论】：

? 这是要走的路。