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

Question

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

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

更新

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

Answer 1

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

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

我过去的强力解决方案是从其输入中提取完整的表单状态onSubmit，并在允许提交继续之前重新运行验证。

按照您的建议使用componentDidMount听起来像是一个更优雅的解决方案，因为它可以避免用户输入无效数据并允许在收到任何警告之前尝试提交数据。ref不过，您不需要为每个输入添加 a ；只需添加一个到<form>并使用它的.elements集合来提取所有数据。

建议的解决方案：

1. 在 中componentDidMount()，从表单中提取表单数据.elements（为此目的，我从表单库中提取了get-form-data ）
2. 根据应用程序的状态检查每个字段的当前值。
3. 如果字段的当前值不同，请像处理通过事件到达的新用户输入一样对待它 - 更新它的状态并重新运行任何关联的验证例程。

从那时起componentDidMount()，您的应用程序和用户将始终位于同一页面（字面意思）。