Question

我使用页面表单，在其中尝试编辑一些数据，然后将其推回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 to http://localhost:3000/item/edit/-LIwD570ojGyu8fbNqXA?title=HP245&details= ... ightadj=on&portrait=on&gaming=on

为什么会发生这种情况？没有事件，因此无可避免。我只有一个链接，仅此而已。

Answer 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>
    );
  }
}

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

1 个答案: