React动态状态更新

svmlkihl  于 2023-01-27  发布在  React
关注(0)|答案(1)|浏览(126)

我有一个动态状态。但是当我更新它时,它总是覆盖它,所以它不会添加新的键和值。例如:

const [DynamicForm, setDynamicForm] = useState({});

<Input placeholder={element.Name}
       onChange={(e) => {
           updateDynamicForm(e.target.value, field.Id);
       }}
/>

const updateDynamicForm = (value, Id) => {
    setDynamicForm({ ...DynamicForm, [Id]: value });
    form.setFieldsValue({ [Id]: value });

};

我使用动态输入3-4次。
这就是我想要的=〉

{15:"Input 1 Text example", 16:"Input 2 Text example"} //15 and 16 is Id that i give it on change event.

这是我得到的=〉

{15:"Input 1 Text example"}  //After i edit input 2 that object becomes => {16:"Input 2 Text Example"}

我的密码有什么问题,我真的很困惑。谢谢你的回复!

ef1yzkbh

ef1yzkbh1#

好吧,我有使用antdesign表单的经验,一般来说,你做错了(不总是,但很有可能)。表单状态不应该在表单之外,它应该包含在表单之内。一旦你开始外部化表单状态,你会遇到在各种情况下试图保持外部状态与实际表单状态同步的问题。
要使组件对窗体状态的更改作出React,请用途:

<Form.Item dependencies={[...names of fields}]>
 {(getFieldValue) => {
     return /* any jsx you want */
 }}
</Form.Item>

你的表单应该 Package 在一个Form组件中,你的每个输入/选择/收音机/任何东西都应该 Package 在一个表单中。项目

相关问题