Question

在我的父组件中，我有一个名为handleDocumentSubmission的函数，我想将该函数传递给孩子。

  handleDocumentSubmission = input => async (e) => {
       console.log("fired");

然后我像这样渲染以下组件。我使用相同的函数名称。

  <FrontConfirm
                    nextStep={this.nextStep}
                    handleReview={this.handleReview}
                    values={values}
                    handleDocumentSubmission={this.handleDocumentSubmission}
                />

现在在我的子组件中，我想通过单击按钮从子函数中调用此函数。

  continue = () => {
        console.log("clicked", this.props);
        this.props.handleDocumentSubmission("front");
    };

<Button onClick={this.continue}
  variant="contained" color="primary">
  Confirm
</Button>

现在单击的控制台日志我可以通过具有handleDocumentSubmission功能的道具看到。但是不会调用父函数console.log("fired")的console.log。

Answer 1

之所以会这样，是因为handleDocumentSubmission是一个接受2组参数的咖喱函数。通过使用以下语法并传递事件参数，它将起作用：

continue = ev => {
    console.log("clicked", this.props);
    this.props.handleDocumentSubmission("front")(ev);
};

您的函数也不需要是异步的：

handleDocumentSubmission = input => e => {
    console.log("fired");
}

不带有continue函数的最终语法（我假设您已创建它用于测试）：

<Button onClick={this.props.handleDocumentSubmission("front")}
    variant="contained" color="primary">
    Confirm
</Button>

使用此功能，您的函数将在触发时接收您的值（front）和事件信息。

具有同步功能不会阻止它返回值：

handleDocumentSubmission = input => e => {
    console.log("fired");
    return 'success'
}

continue = ev => {
    console.log("clicked", this.props);
    const result = this.props.handleDocumentSubmission("front")(ev);
    console.log(result)
};

如果您确实希望将其设置为async，请使用await关键字：

handleDocumentSubmission = input => async e => {
    console.log("fired");
    return /* A promise  */
}

continue = async ev => {
    console.log("clicked", this.props);
    const result = await this.props.handleDocumentSubmission("front")(ev);
    console.log(result)
};

从子函数调用时，反应父属性函数不触发

1 个答案: