从React组件更新模型/集合

Updating model/collection from React component

本文关键字:集合 模型 更新 React 组件      更新时间:2023-09-26

我看到了很多使用React与backbone的例子,但是有些事情对我来说仍然有些不清楚。在几乎所有的例子中,他们都展示了如何让你的组件监听一个模型或集合,并相应地更新视图,这看起来很简单,你可以使用Backbone Mixin,或者你可以在"componentDidMount()"中设置一些事件监听器。

我不清楚的是如何处理另一种方式,即当用户在一些输入字段中写入时,我想在我的模型上设置相同的值,这最终是我验证的,然后保存在服务器上。

对于简单的表单,这也很简单,你可以有一个回调onChange事件,例如:

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

都好了,在setPrice函数中我现在可以这样做:

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

这是有效的,但有两件事立即打动了我:set方法将在模型的每一个键事件上被调用,因为当你在文本框中输入时,react "onChange"实际上在每一个键事件上执行。

我的第二个问题是,这对简单的表单很有效,但是我们有超过30-40个不同的输入字段的表单,在所有这些输入框,复选框上有一个onChange事件,你似乎适得其反。

现在,我们在骨干视图中有一个数据绑定,它简单地设置模型上这些输入字段上的用户类型,这似乎不是React的方式,因为如果你使用ReactLink之类的东西,要更新的是组件上"state"中的属性,而不是模型上的属性。

这里是否存在最佳实践,或者React和Backbone之间的"联姻"根本就不应该存在?似乎需要以某种方式将每个输入字段映射到模型上的特定属性。我不确定这对React来说是不是一件好事。

谢谢

您可以调用setPrice方法onBlur而不是onChange,这样当用户单击或选项卡退出字段时,您将更新状态。

在我看来,这对于较长的表单更有效,因为您可以保证用户将选项卡或单击到下一个字段。