React Modal - 使用参数 onClick 调用函数，而不是渲染

Question

我遇到的问题与当用户单击将打开模式的按钮时调用函数有关。该函数的目的是发出 GET 请求以获取用户信息以填充模式。我正在使用 react-modal 包，它接受一个 onAfterOpen 道具。我知道我可以使用这个 prop 来调用我的函数，但是为了发出 GET 请求，我还需要将一个 id 传递给请求。

我的模态设置如下：

  <Modal
     isOpen={this.props.isSelected}
     onRequestClose={this.props.closeModal}
     onAfterOpen={this.props.getInfo(id)}
     // Also tried declaring function like below, but then I have no reference to user id.
     onAfterOpen={this.props.getInfo}
     contentLabel="Hello"
  >
  </Modal>

像这样声明我的函数的问题是我的页面呈现了一个按钮列表，这些按钮与模式相关联。所以在渲染时，this.props.getInfo(id) 将被调用。

例如，我的容器组件将呈现一个 Button 组件列表（比如 9），如果每个 Button 组件都包含一个 Modal 组件，那么该函数将被调用 9 次。

Answer 1

您可以像这样使用 .bind :

onAfterOpen={this.props.getInfo.bind(this, id)}

React Modal - 使用参数 onClick 调用函数，而不是渲染

React Modal - call function with params onClick, not on render

javascript

reactjs

react-modal