Я пытаюсь использовать 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>
)}
/>
);
}
}