Question

作为一个新的React程序员，我正在努力更新Firebase中的表单数据。请协助。

这是我的按钮：

<button onSubmit={() => this.handleSubmit(this.props.match.params.id)}>
  Update
</button>

这是处理程序：

handleSubmit = (id) => {
  console.log(id);
  return this.props.firestore
  .collection("tasks")
  .doc(id)
  .update({
    title: this.props.title
  })
  .then(data => console.log(data))
  .catch(err => {
    console.log(err);
  });
};

提交后，尽管没有错误，但我也没有将ID记录到控制台。好像什么都没有发生。

Answer 1

我认为onSubmit事件不是给button的，而是Forms。

您必须在onClick上使用button事件。

更新

在使用表单时，您必须在onSubmit上有form，而不是button上，例如

<form onSubmit={() => this.handleSubmit(this.props.match.params.id)}>
  <button>
    Update
  </button>
</form>

Answer 2

我做了以下更改，现在似乎可以正常工作了。

我将onSubmit放在表单标签中，而不是按钮中。由于id是从params.id获取的，所以我意识到我不需要将其作为参数传递-可以直接从onSubmit处理程序中获取它。

最后，我将this.props.title更改为this.state.title。

以下是处理程序：

handleSubmit = e => {
e.preventDefault();
const id = this.props.match.params.id;
console.log(id);
return this.props.firestore
  .collection("tasks")
  .doc(id)
  .update({
    title: this.state.title
  })
  .then(() => {
    this.props.history.push("/");
    window.location.reload();
  })
  .catch(err => {
    console.log("Error updating doc", err);
  });

};

作为回应，如何更新Firebase中的数据？

2 个答案: