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

2018-06-09 01:48:35

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

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

更新

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

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

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

过去我的蛮力解决方案已经从它的输入中提取完整的形式状态onSubmit允许提交继续之前，重新运行validaton。

按照您的建议使用componentDidMount听起来像是一个更优雅的解决方案，因为它避免了用户输入无效数据并被允许在获得任何警告之前尝试提交它。尽管如此，你不需要为每个输入添加一个ref 。只需在<form>添加一个，然后使用它的.elements集合来提取所有数据。

建议解决方案

在componentDidMount() ，从.elements抽取表单的数据（为此我从表单库中提取了get-form-data）

根据应用程序状态中的内容检查每个字段的当前值。

如果某个字段的当前值不同，请像处理通过事件到达的新用户输入那样对待它 - 将其更新为状态并重新运行任何关联的验证例程。

然后从componentDidMount()开始，你的应用程序和用户将始终在同一页面上（字面上）。

如果我正确理解你，这就是发生了什么：https://jsfiddle.net/9bnpL8db/1/

var Form = React.createClass({
    render: function () {
        return <div>
            <input type="text" defaultValue={this.props.defaultValue}/>
        </div>;
    }
});

// Initial form render without server-side data
React.render(<Form/>, $('#container')[0]);

setTimeout(function () {
    // Simulate server-side render
    $('#container').html(
        // overwrites input
        React.renderToString(<Form defaultValue="server1"/>)
    );
}, 5000);

不应该使用服务器端渲染来进行更新。相反，应该使用服务器端渲染来创建初始页面，在用户有机会进行更改之前填充输入。为了解决你的问题，我认为你有几个选择：

使用服务器端渲染来渲染初始页面，预填充保存的数据。使用此选项，用户不会在没有保存的数据的情况下看到页面。这样可以消除用户开始输入输入并使输入覆盖服务器的问题。

使用客户端渲染来渲染页面，并使用GET请求获取预先填充的数据，如果用户尚未输入某些输入，则更新输入。

链接地址: http://www.djcxy.com/p/27293.html

上一篇: How to handle early input to isomorphically rendered forms

下一篇: Is parsing a json naively into a Python class or struct secure?