如何处理早期输入到同构渲染的表单 [英] How to handle early input to isomorphically rendered forms

问题描述

我有一个React应用程序，其中包含一个表单，该表单呈现在服务器端，并预先填充了用户正在进行的工作.问题在于，如果用户在应用程序加载之前在表单中编辑了一个值，则该应用程序将不知道所做的更改.当用户保存时，尽管仍然以表格形式显示，但服务器保存的未更改数据将被重新保存，而用户的新数据将被删除.简而言之，React和输入值之间的连接似乎在断开时会被替换，该值在初始加载时会被替换.

I have a React app that includes a form, which is rendered server side, prepopulated with the user's work in progress. The problem is that if the user edits a value in the form before the app loads, then the app is unaware of the change. When the user saves, the unchanged data that was rendered by the server is re-saved, and the user's new data is dropped, although it is still shown in the form. In short, there seems to be a disconnect between React and input values in the markup that it replaces when initially loading.

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

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?

更新

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

I am now of the opinion that the best way to solve this would be to have React take input values into account when creating checksums. GH issue: https://github.com/facebook/react/issues/4293

推荐答案

我想我可以在每个输入上放置引用，然后将它们的值复制到componentDidMount上的应用程序状态中，但是必须有一种更好的方法.还有其他人解决过这个问题吗?

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?

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

Browsers autofilling fields or remembering previous values across refreshes can also cause what is effectively the same issue - your app's view of the data being different from the user's.

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

My brute-force solution in the past has been to extract the complete form state from its inputs onSubmit and re-run validaton before allowing submission to proceed.

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

Using componentDidMount as you suggest sounds like a more elegant solution as it avoids the user entering invalid data and being allowed to try to submit it before they get any warnings. You don't need to add a ref to every input, though; just add one to the <form> and use its .elements collection to pull all the data.

建议的解决方案:

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

1. In componentDidMount(), pull the form's data from its .elements (I extracted get-form-data from my form library for this purpose)
2. Check each field's current value against what's in your app's state.
3. If a field's current value is different, treat it just as you would new user input arriving via an event - update it in state and re-run any associated validation routines.

然后，从componentDidMount()开始，您的应用程序和用户将始终位于同一页面(字面上).

Then from componentDidMount() onwards, your app and the user will always be on the same page (literally).

这篇关于如何处理早期输入到同构渲染的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！