Question

我是React的新手，我将通过几个步骤创建一个向导样式的注册组件。我正在使用称为currentStepComponent的引用加载子组件，因此可以在它们上调用executeAction函数。该执行功能将基本上在子组件中提交表单。

<Component ref={this.currentStepComponent} />
<button onClick={() => {this.currentStepComponent.current.executeAction()}}>
    Next Step
</button>

该子组件呈现了一个使用ref创建的表单，因此我可以提交它。

executeAction() {
    //Trigger Submit
    this.formRef.current.submit();
}

handleFormSubmit(e) {
    e.preventDefault();
    //his never runs, the form just submits.
    ...
}

render() {
    return (
        <form 
            onSubmit={this.handleFormSubmit}
            ref={this.formRef}
        >
    );
}

我遇到的问题是，当我使用ref时，我的提交处理程序未附加到表单上。我尝试了几种不同的方法将此事件处理程序附加到我的Submit事件中，但它错过了它。我在这里创建了一个工作区：https://codesandbox.io/s/jovial-dan-x1i7b?file=/src/App.js

如何将handleFormSubmit附加到formRef？有没有更好的方法来解决此问题？

将事件处理程序绑定到React引用

0 个答案: