获取 Firebase 存储链接后页面重新加载答案

【问题标题】：Page reloads after getting a Firebase storage link获取 Firebase 存储链接后页面重新加载
【发布时间】：2018-08-02 22:47:08
【问题描述】：

我在页面表单上工作，我尝试编辑一些数据，然后将它们推送回 Firebase。保存后，文本字段中的编辑数据工作正常。

此页面上的表单也是图像，基于从 Firebase 存储中检索到的链接和用于在需要时删除这些图片的按钮。图片显示正常。

{links.length && links.map((link, i) => (
  <div>
   <img key={i} src={link} alt="loaded" height="100" width="100"/>
   <button
     className="btn btn-danger"
     onClick={this.onDeletePic.bind(this, link)}
     ><i className="fas fa-times"></i>
   </button>
  </div>
))}

删除按钮点击由函数处理（为了测试，暂时）

onDeletePic = (link) => {
  console.log('link to delete', link)
}

单击按钮时，我在控制台中看到link to delete

link to delete https://firebasestorage.googleapis.com/v0/b/site.appspot.com/o/img%2F-LIwD570ojGyu8fbNqXA%2Fimages.jpeg?alt=media&token=3457eb05-deac-4d03-91ee-10d8afc3e93d

并且页面立即重新加载，就像在 POST 请求之后（我在控制台中检查了“保留日志”）Navigated 写成蓝色

Navigated to http://localhost:3000/item/edit/-LIwD570ojGyu8fbNqXA?title=HP245&details= ... ightadj=on&portrait=on&gaming=on

为什么会发生这种情况？没有事件，所以没有什么可以阻止的。我只有一个链接，仅此而已。

【问题讨论】：

您的按钮是否在form 元素内？如果是这种情况，您还必须将event 发送到onDeletePic 并运行event.preventDefault()，以防止重新加载浏览器的默认浏览器行为。
@Tholle 是的，所有代码都在一个大的父表单中。谢谢，我试试这个方法。

标签： javascript reactjs firebase firebase-storage

【解决方案1】：

由于您的按钮位于表单内，因此您必须防止提交表单的默认行为是重新加载浏览器。

您可以将事件以及link 传递给您的onDeletePic 函数并使用event.preventDefault 来防止重新加载。

示例

class App extends React.Component {
  // ...

  onDeletePic = (event, link) => {
    event.preventDefault();
    console.log("link to delete", link);
  };

  render() {
    return (
      <div>
        {/* ... */}
        {links.length &&
          links.map((link, i) => (
            <div>
              <img key={i} src={link} alt="loaded" height="100" width="100" />
              <button
                className="btn btn-danger"
                onClick={event => this.onDeletePic(event, link)}
              >
                <i className="fas fa-times" />
              </button>
            </div>
          ))}
        {/* ... */}
      </div>
    );
  }
}

【讨论】：

非常感谢，刚刚做到了