Реакция окончательной формы отключает поля без редукса - PullRequest
Новая
       20

Реакция окончательной формы отключает поля без редукса

1 голос
/ 30 января 2020

У меня есть следующие функции, которые отображают набор полей: 

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

, однако отключенный статус в данный момент зависит от структуры избыточности. Есть ли способ сделать поля отключенными / включенными по щелчку, не отправляя действие, сообщающее, какие поля следует включить или нет?

1 Ответ

1 голос
/ 30 января 2020

Использование локального состояния здесь будет уместно. Вот упрощенный пример: 

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

Вы можете использовать упакованную версию везде, где бы вы использовали компонент Field.

...