具有多个参数的 React 函数

Question

我在尝试使用调用 API 方法从数据库中删除所选项目的删除函数时遇到问题。

API 只接受页面 ID，所以我一直在尝试将 ID 发送到 api。

这是应用程序主容器中的函数。

  deletePage(id) {
    instance.put(`/admin/deletePage/${id}`).then((response) => {
      this.getPages();
      window.location.replace('/')
    }).catch((error) => {
      console.log(error)
    })
  }

然后我将此函数作为道具传递给 Dashboard 组件，我在其中创建另一个函数来处理删除：

  handleDelete(e, id) {
    e.preventDefault()
    this.props.deletePage(id)
  }

最后，我的渲染函数：

render() {
    const pages = this.props.pages.map((page, i) => {
        return (
        <div key={i}>
        <h2>{page.title}</h2>
        <a href={`/admin/edit-page/${i}`}>Edit</a>
        <button onClick={this.handleDelete(i)}>Delete</button>
        </div>
        )
    });

    return (
      <div>
        <h2>Dashboard</h2>
        {pages}
      </div>
    );
  }

目前我在控制台中收到此错误：e.preventDefault is not a function

如果我删除 preventDefault 行，它只会导致不断重新加载。

请帮忙。只是想删除东西 mwhaha

Answer 1

我认为这里有两个问题。

首先，this.handleDelete 参数的顺序应该颠倒过来：this.handleDelete(id, e)。事件对象总是最后提供。

其次，onClick={this.handleDelete(i)}应该是onClick={this.handleDelete.bind(this, i)}。 onClick={this.handleDelete(i)} 将调用 this.handleDelete 的结果赋值给 onClick。当您的意思是当用户单击按钮时调用该函数时，您在渲染阶段不小心调用了 this.handleClick。

Answer 2

您应该使用高阶函数来执行此操作。它只是一个函数 return 另一个函数。

handleDelete(id) {
    return (event)=> {
        event.preventDefault()
        this.props.deletePage(id)
    }
}

然后像之前一样调用

 <button onClick={this.handleDelete(i)}>Delete</button>