Question

The bounty expires in 7 days. Answers to this question are eligible for a +50 reputation bounty. Alexis Tyler is looking for an answer from a reputable source.

我要在按钮中的 点击 事件中调用 Async 函数。但是它不起作用。是否可以在点击按钮中调用 Async 函数?

这是密码

< 加固> Filter 按钮

const FilterButton = (props) => {

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

抓取发票同步函数

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

您的 < a href= > "https://javascript.info/async-await" rel= "noreferrer" >async 函数 :

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

    let result = await promise

    alert(result);
}

您的 < a href=> "https://reactjs.org/docs/rapping-events.html" rel=" noreferrer">按钮组件呼叫:

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

友情链接