从React组件更新模型/集合

Question

我看到了很多将React与主干一起使用的示例，但是有些事情对我来说还是不清楚的。 在几乎所有示例中，它们都显示了如何使您的组件侦听模型或集合并相应地更新视图，这似乎非常简单，可以使用Backbone Mixin，也可以在“ componentDidMount（）”中设置一些事件侦听器。

我还不清楚如何处理另一种方法，即当用户在某个输入字段中进行书写时，我想在模型上设置相同的值，这最终是我验证并保存在服务器上的值。

使用简单的表单，这也非常简单，您可以为onChange事件提供一个回调，例如：

return <div><input type="text" onChange={this.setPrice} /></div>

一切都很好，在setPrice函数中，我现在可以执行以下操作：

this.props.myModel.set('price', e.target.value);

这行得通，但是有两件事立即引起我的注意：在每次输入单个键事件时，都会在模型上调用set方法，因为当您在文本框中键入内容时，Reacts“ onChange”实际上在每个键事件上执行。

我的第二个担心是，这对于简单的表单很有用，但是我们的表单具有多达30-40个不同的输入字段，在所有这些输入框，复选框上都有一个onChange事件，并且您似乎适得其反。

现在，我们在Backbone Views中有一个数据绑定，它可以简单地在模型的这些输入字段上设置任何用户类型，这似乎不是React的方法，因为如果使用ReactLink之类的东西会更新组件“状态”内的属性，而不是模型上的属性。

这里是否有最佳实践，还是React和Backbone之间的这种“婚姻”不是故意的？ 似乎您需要以某种方式将每个输入字段映射到模型上的特定属性。 我不确定这是React的好事。

谢谢

Answer 1

您可以调用setPrice方法onBlur而不是onChange以便在用户单击或跳出字段时更新状态。

在我看来，这对于较长的表单更有效，因为可以确保用户将制表符或单击到下一个字段。