可以在按钮反应的 onClick 中调用异步函数吗

Question

我将onclick在按钮中的事件中调用异步函数。但它不起作用。是否可以在按钮 onlick 中调用异步函数？

这是代码。

过滤按钮

const FilterButton = (props) => {

return (
    <div className="p-2 ">
        <button className="btn btn-secondary" onClick={props.fetchInvoices}>Filter</button>
    </div>
 );
};

fetchInvoices 异步函数

fetchInvoices = async () => {
    const invoices = await getInvoices(this.currentState.params);
    this.props.store.dispatch(UpdateInvoices(invoices));
};

将函数传递给组件的代码

 <SearchField store = {this.props.store} fetchInvoices={this.fetchInvoices}/>

Answer 1

这就是我在一个内部调用我的异步的方式onClick：

<Button onClick={async () => {await this.asyncFunc("Example");} }/>

async asyncFunc(text) {
    console.log(text);
}

Answer 2

你的异步函数：

const asyncFunc = async () => {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("I am a done promise!"), 3000)
    });

    let result = await promise

    alert(result);
}

您的按钮组件调用：

<button onClick={asyncFunc} >I am a button!</button>