Bootstrap 4 在 Reactjs 中的按钮上加载 Spinner
Bootstrap 4 Loading Spinner on button in Reactjs
我正在尝试在按钮上添加 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>
<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 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>
<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>
元素,而不是将其写为按钮标签。