如何在React中隐藏提交按钮后提交表单?

Question

我想提交一个表单与表单动作。然而，提交需要相当长的时间，所以我试图在表单提交时显示一个加载消息，告诉用户在屏幕上等待，然后他们会被重定向。问题是，当我显示加载屏幕时，表单提交不再工作。我已经缩小了范围，因为触发事件的提交按钮不再存在，因此它不会提交。是否有一种方法可以显示加载屏幕并确保提交操作通过?

handleSubmit = () => {
...
this.setState({isLoading: true});
...
this.formRef.current.submit();
}
<form ref={this.formRef} action="https://www.google.com" method="post">
{isLoading ? (
this.renderLoading()
) : (
<>
<input type="text">input</input>
<button type="submit" onClick={this.handleSubmit}>button<button>
</>
</form>

我已经尝试了下面的解决方案，它成功地工作了，但是，我不希望按钮显示在加载屏幕

handleSubmit = () => {
...
this.setState({isLoading: true});
...
this.formRef.current.submit();
}
<form ref={this.formRef} action="https://www.google.com" method="post">
{isLoading ? (
this.renderLoading()
) : (
<>
<input type="text">input</input>
</>
<button type="submit" onClick={this.handleSubmit}>button<button>
</form>

有没有一种方法，使这个工作没有显示在加载屏幕上的按钮?

Answer 1

隐藏控件，而不是杀死它们:

handleSubmit = () => {
...
this.setState({isLoading: true});
...
this.formRef.current.submit();
}
<form ref={this.formRef} action="https://www.google.com" method="post">
<>
{ isLoading && this.renderLoading() }
<input type="text" className={isLoading ? 'hidden' : ''}>input</input>
<button type="submit" onClick={this.handleSubmit} className={isLoading ? 'hidden' : ''}>button<button>
</>
</form>

hidden类的css为display: none