javascript - 使用 React 和 firereact 从 Firebase 中删除节点

标签 javascript firebase reactjs

我对 reactfire 的工作方式感到非常困惑,因为它似乎没有太多关于它的文档。

所以我想删除和更新一些子节点,但我不知道该怎么做。所有教程都只关注检索数据,这些数据被视为常规数组,我什至似乎无法访问它们的键。

这是官方示例:https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html

如何使用 React 执行这些操作?

一旦你实例化了 FB:

```
this.fb = new Firebase('https://react-testing.firebaseio.com/items');
this.bindAsArray(this.fb, 'items');
```

'items' 绑定(bind)到 this.state.items。太棒了,现在我有了数据。

但是我该如何操作它呢?获取对正在传递的项目的引用的正确方法是什么?

最佳答案

正如我在评论中所说:ReactFire 是一个微型包装器,它围绕着常规 Firebase JavaScript SDK 的一个小子集。如果您想构建超出其功能的应用程序,您可以轻松地对其进行扩展。

根据您的要求,我继续在 ReactFire 中更改了以下代码段:

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    out.push(obj[key]);
  }
}

对此:

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    var item = obj[key];
    item['$id'] = key;
    out.push(item);
  }
}

所以我们现在将每个项目的 key() 作为数组中项目的“特殊”$id 属性传递。

有了它,我可以将原始的 TodoList3 类扩展为:

var TodoList3 = React.createClass({
  handleClick: function(key) {
    if (this.props.onClick) {
      this.props.onClick(key);
    }
  },
  render: function() {
    var list = this;
    var createItem = function(item) {
      var boundClick = list.handleClick.bind(list, item['$id']);
      return <li key={ item['$id'] } onClick={boundClick}>{ item.text }</li>;
    };
    return <ul>{ this.props.items.map(createItem) }</ul>;
  }
});

因此,我们现在通过它们的 $id/key() 来识别 Todo 项目,而不是通过它们的索引,并在用户单击该项目时使用该值。

有了它,我们可以扩展 TodoApp3 的 JSX 以在用户单击某个项目时传入一个处理程序:

<TodoList3 items={ this.state.items } onClick={this.handleClick} />

然后应用程序将通过调用常规 Firebase JavaScript SDK 来删除该项目。

handleClick: function(key) {
  var firebaseRef = this.state.ref;
  firebaseRef.child(key).remove();
},

链接:

关于javascript - 使用 React 和 firereact 从 Firebase 中删除节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29878564/

相关文章:

reactjs - 支持使用 React Hook 表单验证时更改另一个字段值的回调

javascript - 在 JavaScript 中,如何返回一个 bool 值来指示 JSON 对象中是否存在键?

javascript - Bootstrap $ ('.multiselect' ).multiselect() CONFLICT

android - 在 Firebase 中更新目标

Firebase 受众编辑和删除已禁用

javascript - 带有动画的事件时间线

javascript - 为什么我的 javascript 没有在此 Razor 代码中执行?

javascript - 从 Java 脚本中的数组列表中排除 ID 列表

firebase - 我可以向我的 Firebase 托管静态网站添加其他文件,还是每次都必须部署整个网站?

javascript - array.map 无法导出对象?