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>

此表单为'dumb'，表示它从父级获取formState并在更改输入时调度setFormState。在父组件中，它看起来像：

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

其中formState和setFormState是钩子：

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

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

但是，状态不会改变，我也无法在Form的输入中写入任何内容。当我单击“提交”时，将记录初始状态，并且所有属性都是空字符串，就像在initialFormState中一样。

如果有人需要更多信息，我很乐意提供。谢谢。

添加代码框链接：https://codesandbox.io/s/admiring-haze-gsy59?file=/src/App.js

Answer 1

onChange on输入不会发出该值，而是发出一个事件。

替换为onChange={e => setFormState({ ...formState, name: e.target.value })}

窗体上的挂钩管理状态不会在父组件中更新

1 个答案: