具有多个参数的反应函数答案

【问题标题】：React function with multiple params具有多个参数的反应函数
【发布时间】：2017-07-09 14:26:34
【问题描述】：

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

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

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

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

然后我将此函数作为道具传递给仪表板组件，在那里我创建另一个函数来处理删除：

  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

【问题讨论】：

您调用 'this.handleDelete(i)' 而 i 不是实际事件。

标签： javascript reactjs

【解决方案1】：

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

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

然后像以前一样调用

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

【讨论】：

【解决方案2】：

我认为这里有两个问题。

首先，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，而您的意思是在用户单击按钮时调用该函数。

【讨论】：