如何处理同构渲染表单的早期输入

发布时间：2020-12-14 16:37:11 所属栏目：资源来源：网络整理

导读：我有一个React应用程序,其中包含一个表单,该表单在服务器端呈现,预先填充了用户正在进行的工作.问题是如果用户在应用加载之前在表单中编辑了一个值,那么应用程序就不会意识到这一变化.当用户保存时,服务器呈现的未更改数据将被重新保存,并且用户的新数据将被

我有一个React应用程序,其中包含一个表单,该表单在服务器端呈现,预先填充了用户正在进行的工作.问题是如果用户在应用加载之前在表单中编辑了一个值,那么应用程序就不会意识到这一变化.当用户保存时,服务器呈现的未更改数据将被重新保存,并且用户的新数据将被删除,尽管它仍显示在表单中.简而言之,React和它在初始加载时替换的标记中的输入值之间似乎存在脱节.

我想我可以在每个输入上放置refs并将它们的值复制到componentDidMount上的应用程序状态,但必须有更好的方法.还有其他人解决了这个问题吗？

更新

我现在认为解决这个问题的最佳方法是在创建校验和时让React考虑输入值. GH问题：https://github.com/facebook/react/issues/4293

解决方法

I suppose I could put refs on every input and copy their values into the application state on componentDidMount,but there has got to be a better way. Has anyone else solved this problem?

浏览器自动填充字段或在刷新时记住以前的值也可能导致实际上同样的问题 – 您的应用程序的数据视图与用户的不同.

我过去的蛮力解决方案是从提交的输入中提取完整的表单状态并重新运行validaton,然后再继续提交.

使用componentDidMount听起来像一个更优雅的解决方案,因为它避免了用户输入无效数据,并允许他们在收到任何警告之前尝试提交它.但是,您不需要为每个输入添加引用;只需在< form>中添加一个并使用其.elements collection来提取所有数据.

建议的解决方案：

>在componentDidMount()中,从其.elements中提取表单的数据(为此,我从表单库中提取了get-form-data)
>根据应用程序状态中的内容检查每个字段的当前值.
>如果字段的当前值不同,请将其视为通过事件到达的新用户输入 – 将其更新为状态并重新运行任何关联的验证例程.

然后从componentDidMount()开始,您的应用和用户将始终在同一页面上(字面意思).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!