问如何处理对同构呈现形式的早期输入

EN

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

浏览器自动填充字段或通过刷新记住以前的值也会导致同样的问题--您的应用程序对数据的看法与用户的不同。

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

正如您所建议的那样，使用componentDidMount听起来更优雅，因为它避免了用户输入无效数据，并允许用户在收到警告之前提交数据。不过，您不需要向每个输入添加一个ref；只需将一个添加到<form>中，并使用它的集合来提取所有数据。

建议的解决办法：

1. 在componentDidMount()中，从其.elements中提取表单的数据(为此目的，我从表单库中提取了获取表格数据 )
2. 检查每个字段的当前值与您的应用程序的状态。
3. 如果一个字段的当前值是不同的，那么将其视为通过事件到达的新用户输入--在状态中更新它并重新运行任何相关的验证例程。

然后从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);

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

1. 使用服务器端呈现来呈现初始页面，用保存的数据预先填充输入。使用此选项，用户将不会在没有保存数据的情况下查看该页。这消除了用户开始输入输入，然后由服务器覆盖该输入的问题。
2. 使用客户端呈现来呈现页面，并使用GET请求获取预先填充的数据，如果用户尚未输入某些输入，则更新输入。