React动态表单状态处理

React Dynamic form state handling

本文关键字：处理状态表单动态 React 更新时间：2023-09-26

我有一个动态表单。该表单没有基于用户输入的首选模式，我将表单中的所有用户输入捕获为React State。

在表单提交时，我将State（JSON）转换为YAML文件。这种状态的JSON结构有一个包含多个数据结构的深层树。当我更改这个深层树中的任何元素时，表单就会更新。但是，随着动态表单的增长，表单加载时间和反应时间也会增加。有什么方法可以更快地处理这种复杂的状态操作吗？

所以这里是我使用的方法

我制作了一个数组，并将每个动态子从添加到数组中，如果它有任何变化，我会专门更新索引子窗体。因此只有部分树得到更新。

我还根据索引生成输入名称，这样我就可以通过拆分名称来解析当前索引，例如username-10，其中10来自索引，username是实际输入。也添加onBlur而不是onChange。