在 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