Радиогруппа с другой опцией для текстового поля с использованием formik - PullRequest
0 голосов
/ 20 сентября 2019

Я пытаюсь использовать formik для создания элемента управления формы, который имеет набор параметров радио с опцией «other», ведущей к раскрытию поля ввода текста.У меня большая часть работы работает, но единственное, что я не могу разрешить, это когда я начинаю печатать в текстовое поле, опция «прочее» отключается, так как значение formik для этого поля изменяется.Элемент управления формы по-прежнему работает, как и ожидалось, просто интересно, есть ли способ не отменять выбор опции радио, когда набирается текстовое поле. Вот что у меня есть:

export class FormLargeRadioGroupControl extends React.Component<Props, State> {
  state = {
    otherSelected: false,
  };

  handleOnChange = (event: SyntheticInputEvent<HTMLSelectElement>) => {
    const { name, formikProps } = this.props;
    const otherSelected = event.target.value === 'other';
    this.setState(
      { otherSelected },
      formikProps.setFieldValue(name, event.target.value),
    );
  };

  render() {
    const {
      materialProps: {
        label,
        fullWidth,
        error,
        disabled,
        ...otherMaterialProps
      },
      defaultValue,
      formikProps,
      options,
      name,
      row,
    } = this.props;

    return (
      <Field
        {...formikProps}
        name={name}
        render={({ field }) => (
          <React.Fragment>
            <FormLabel component="label" style={{ marginTop: '16px' }}>
              {label}
            </FormLabel>
            <RadioGroup
              {...field}
              {...otherMaterialProps}
              row={row}
              value={field.value || defaultValue}
              onChange={this.handleOnChange}
            >
              {options.map(opt => (
                <FormControlLabel
                  control={<Radio />}
                  disabled={disabled || opt.disabled}
                  key={opt.label}
                  label={opt.label}
                  value={opt.value}
                />
              ))}
            </RadioGroup>
            {this.state.otherSelected && (
              <TextField
                label="Other Reason"
                {...otherMaterialProps}
                {...field}
              />
            )}
          </React.Fragment>
        )}
      />
    );
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...