Состояние управления обработчиком в форме не обновляется в родительском компоненте

Question

У меня есть форма:

                        <FieldLabel label='Label'>
                            <Textfield
                                value={formState.name}
                                onChange={name => setFormState({ ...formState, name })}
                                name="someName"/>
                        </FieldLabel>
                        <FieldLabel label='Description'>
                            <Textarea
                                value={formState.description}
                                onChange={description => setFormState({ ...formState, description}}
                                name="someDesc"/>
                        </FieldLabel>

Эта форма «тупая», что означает, что она получает свой formState от родителя и отправляет setFormState при изменении ввода. В родительском компоненте это выглядит так:

            <MyForm
                formState={formState}
                setFormState={setFormState} />

, где formState и setFormState - хуки:

const initialFormState: FormState = {
    name: '',
    description: '',
}

const [formState, setFormState] = useState<FormState>({ ...initialFormState });

Однако состояние не меняется, и я не могу ничего записать в входы в Форме. Когда я нажимаю кнопку «Отправить», регистрируется начальное состояние, и все свойства представляют собой пустые строки, как и в initialFormState.

Если кому-то нужна дополнительная информация, я буду рад ее предоставить. Спасибо.

Добавление ссылки codeandbox: https://codesandbox.io/s/admiring-haze-gsy59?file= / src / App. js

Answer 1

onChange при вводе не генерирует значение, а генерирует событие.

Заменить на onChange={e => setFormState({ ...formState, name: e.target.value })}