javascript - 如何在 React 中的 GraphQL 突变组件中包含的按钮上有多个 onClick 事件

Question

我的 React 应用程序中有以下突变组件:

   <Mutation
        mutation={REF_REQUEST_MUTATION}
        variables={{ fullname, email, relationship, position, message }}
      >
        {refRequestMutation => (
          <Button onClick={refRequestMutation}>Send</Button>
        )}
   </Mutation>

该突变组件位于模态中，并且已成功发送突变。不过，我还需要 onClick 事件来关闭模式并发送突变。

我关闭模式的方法如下所示:

  closeModal(modal) {
    this.setState({
      [modal]: false,
    });
  }

这是我添加到按钮以关闭模式的 onClick 事件

<Button onClick={this.closeModal.bind(this, "modal3")}> Close </Button>

我的主要问题是如何将第二个 onClick 事件添加到包含在突变组件中的按钮。我尝试过创建一个额外的方法来处理这两个事件，并且我尝试将另一个 onClick 事件添加到同一个按钮。

两者都不起作用。我对在 React 应用程序中使用 graphQL 还很陌生，所以我不确定如何更改突变的语法。

提前致谢!

Answer 1

创建一个处理两者的附加方法应该可行。技巧是将 refRequestMutation 回调传递一个参数给事件处理程序(我更喜欢从工厂函数创建和返回处理程序，但您也可以使用绑定(bind)，就像您在其他地方所做的那样):

    <Mutation
        mutation={REF_REQUEST_MUTATION}
        variables={{ fullname, email, relationship, position, message }}
      >
        {refRequestMutation => (
          <Button onClick={this.handleMutation.bind(this, "modal3", refRequestMutation)}>Send</Button>
        )}
    </Mutation>

    handleMutation (modal, mutationCallback, e) {
        this.closeModal(modal);
        mutationCallback(e);
    }