React Server Side渲染表单在React组件初始化后清除输入

Question

我有一个完全重新启用的表单，并使用服务器端呈现立即显示页面，而不是在加载React脚本之后。

问题是如果用户开始在表单中输入任何信息，一旦React加载并重建表单，该输入就会被删除。什么是防止这种情况发生而不必跳过太多箍的正确方法？

理想情况下，我希望保留输入，然后将其存储在React状态。

Answer 1

表单组件中是否有value属性？如果是这样，这些组件会考虑controlled components，这会使它们反映存储在组件中的值。 React在DOM元素上初始化组件的那一刻元素的值重置。

有两种解决方法：

1. 不要使用受控组件并自行进行数据绑定。 React Forms文档中描述了如何做到这一点。
2. 默认情况下禁用表单，并在React完全初始化后启用它。

Answer 2

在进行服务器端渲染时，

React version 16.0.0添加了一个api ReactDOM.hydrate来代替ReactDOM.render。用水合物代替渲染为我解决了这个问题。