javascript - ReactJS 更新数组

Question

我目前正在开始学习 ReactJS，但在更新数组时遇到了一些问题。

目前我有一个可搜索的联系人列表，工作正常。但是使用列表下方的输入框，我尝试使用 update() 函数将其他项目添加到列表中。

到目前为止，我所获得的更新功能示例如下。理想情况下，更新的内容将来自按钮左侧的输入框，但目前我只是尝试推送静态项目作为测试。

  updateContact: function(e){
    e.preventDefault();
    var newItems = React.addons.update(this.state.initialItems, {$push: ["New Item"]})
    return;
  },

任何帮助或指导将不胜感激，并且可以在下面找到包含完整代码的完整 JSFiddle。

JS Fiddle

Answer 1

您没有调用 setState ，因此该组件永远不会重新呈现:

updateContact: function(e){
  e.preventDefault():
  var newItems = React.addons.update(this.state.initialItems, {$push: ["New Item"]});

  this.setState({
    initialItems: newItems,
    items: newItems
  }); // update state
},

请注意更新两者，this.state.items , this.state.initialItems .我假设您使用的是 items对于筛选列表和 initialItems对于列表中的所有项目。

当然你必须更换"New Item"与文本字段的实际值。

---

我还会删除 componentWillMount并简单地设置 initialItems和 items在 getInitialState 中具有相同的值.

此外，如果您只是将处理程序直接绑定(bind)到按钮并删除 <form> ，您不必处理防止事件。这似乎是一种相当迂回的触发回调的方式。

清理示例:https://jsfiddle.net/f554xrh0/