React final form 在没有 redux 的情况下禁用字段

Question

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

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 结构。有没有一种方法可以在单击时创建字段 disabled/enabled，而不必发送说明哪些字段应该启用或不启用的操作？

Answer 1

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

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

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

React final form 在没有 redux 的情况下禁用字段

React final form disables fields without redux

javascript

reactjs

redux

react-final-form