Bootstrap 4 在 Reactjs 中的按钮上加载 Spinner

Question

我正在尝试在按钮上添加 Bootstrap 4 Loading Spinner。我的按钮代码如下

<button className="btn-wide btn-pill btn-shadow btn-hover-shine btn btn-primary btn-lg"
                          onClick={this.handleSubmit}>
   {
      this.state.toggle && this.props.value !== 'error'
           ? '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'
    : ''
   }
   Create Account
  </button>

我得到如下输出

我在 index.html 文件中包含 Bootstrap 4，如下所示

<title>React App</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

  </head>

Answer 1

<button className="btn-wide btn-pill btn-shadow btn-hover-shine btn btn-primary btn-lg"
                      onClick={this.handleSubmit}>
   {
      this.state.toggle && this.props.value !== 'error' &&
           <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
   }
   Create Account
</button>

这会让 React 知道您想要呈现 <span> 元素，而不是将其写为按钮标签。

Bootstrap 4 在 Reactjs 中的按钮上加载 Spinner

Bootstrap 4 Loading Spinner on button in Reactjs

loading

spinner

reactjs

bootstrap-4