React Bootstrap - 微调器和按钮在一行中
React Bootstrap - spinner and button in one line
您好,我使用 react-bootstrap、mdbootstrap 和 formik 创建了一个登录表单。每次用户按下登录按钮时,我都希望显示一个登录微调器。我已经想出了如何去做,但是我在将 bootstrap 微调器与登录按钮
放在同一行时遇到了问题
我想实现这样的目标
这是我的代码
render() {
return (
<Formik
validationSchema={schema}
onSubmit={this.handleSubmit}
initialValues={{username: '', password: ''}}>
{
formProps => (
<Form name='form' onSubmit={formProps.handleSubmit}>
<Form.Group noValidate controlId="loginForm.username">
<Form.Label>Adres e-mail</Form.Label>
<Form.Control
type="text"
name="username"
value={formProps.values.username}
onChange={e => {
formProps.handleChange(e);
const {username} = formProps.initialValues;
if (formProps.values.username === username) {
formProps.setFieldTouched('username', false)
}
}}
isInvalid={!!formProps.touched.username && !!formProps.errors.username}
/>
<Form.Control.Feedback type="invalid">
{formProps.errors.username}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="loginForm.password">
<Form.Label>Hasło</Form.Label>
<Form.Control
type="password"
name="password"
value={formProps.values.password}
onChange={e => {
formProps.handleChange(e);
const {password} = formProps.initialValues;
if (formProps.values.password === password) {
formProps.setFieldTouched('password', false)
}
}}
isInvalid={!!formProps.touched.password && !!formProps.errors.password}
>
</Form.Control>
<Form.Control.Feedback type="invalid">
{formProps.errors.password}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="loginForm.loginBtn">
<div className="d-inline-block">
<Button variant="primary" type="submit">
Zaloguj się
</Button>
<Spinner animation="border" variant="info" />
</div>
</Form.Group>
</Form>
)
}
</Formik>
)
}
编辑:coeden:codesandbox。io/s/quirky-blackburn-z7gtt
实现此目的的一种简单方法是向 Spinner 添加自定义 class。设置 class 负底部边距会将微调器向下拉,使其与按钮对齐。
更新反应:
<Spinner animation="border" variant="primary" className="centered-spinner" />
CSS:
.centered-spinner {
margin-bottom: -7px;
}
Centered spinner result image
您可以使用 <div class="d-flex align-items-center">
而不是 <div className="d-inline-block">
作为按钮和微调器的包装器。
以下是您需要更改的代码:
import React from "react";
import ReactDOM from "react-dom";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Spinner from "react-bootstrap/Spinner";
import "./styles.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
function App() {
const [isSubmitted, submitForm] = React.useState(false);
return (
<Form
name="form"
onSubmit={e => {
e.preventDefault();
submitForm(true);
}}
>
<Form.Group noValidate controlId="loginForm.username">
<Form.Label>Adres e-mail</Form.Label>
<Form.Control
type="text"
name="username"
value={"aaaa"}
onChange={e => {}}
/>
</Form.Group>
<Form.Group controlId="loginForm.loginBtn">
<div className="d-flex justify-content-start">
<Button variant="primary" type="submit">
{!isSubmitted && "Zaloguj się"}
{isSubmitted && <Spinner animation="border" variant="info" />}
</Button>
</div>
</Form.Group>
</Form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
我已经使用 React.useState
钩子来改变函数中的状态。
您好,我使用 react-bootstrap、mdbootstrap 和 formik 创建了一个登录表单。每次用户按下登录按钮时,我都希望显示一个登录微调器。我已经想出了如何去做,但是我在将 bootstrap 微调器与登录按钮
放在同一行时遇到了问题我想实现这样的目标
这是我的代码
render() {
return (
<Formik
validationSchema={schema}
onSubmit={this.handleSubmit}
initialValues={{username: '', password: ''}}>
{
formProps => (
<Form name='form' onSubmit={formProps.handleSubmit}>
<Form.Group noValidate controlId="loginForm.username">
<Form.Label>Adres e-mail</Form.Label>
<Form.Control
type="text"
name="username"
value={formProps.values.username}
onChange={e => {
formProps.handleChange(e);
const {username} = formProps.initialValues;
if (formProps.values.username === username) {
formProps.setFieldTouched('username', false)
}
}}
isInvalid={!!formProps.touched.username && !!formProps.errors.username}
/>
<Form.Control.Feedback type="invalid">
{formProps.errors.username}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="loginForm.password">
<Form.Label>Hasło</Form.Label>
<Form.Control
type="password"
name="password"
value={formProps.values.password}
onChange={e => {
formProps.handleChange(e);
const {password} = formProps.initialValues;
if (formProps.values.password === password) {
formProps.setFieldTouched('password', false)
}
}}
isInvalid={!!formProps.touched.password && !!formProps.errors.password}
>
</Form.Control>
<Form.Control.Feedback type="invalid">
{formProps.errors.password}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="loginForm.loginBtn">
<div className="d-inline-block">
<Button variant="primary" type="submit">
Zaloguj się
</Button>
<Spinner animation="border" variant="info" />
</div>
</Form.Group>
</Form>
)
}
</Formik>
)
}
编辑:coeden:codesandbox。io/s/quirky-blackburn-z7gtt
实现此目的的一种简单方法是向 Spinner 添加自定义 class。设置 class 负底部边距会将微调器向下拉,使其与按钮对齐。
更新反应:
<Spinner animation="border" variant="primary" className="centered-spinner" />
CSS:
.centered-spinner {
margin-bottom: -7px;
}
Centered spinner result image
您可以使用 <div class="d-flex align-items-center">
而不是 <div className="d-inline-block">
作为按钮和微调器的包装器。
以下是您需要更改的代码:
import React from "react";
import ReactDOM from "react-dom";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Spinner from "react-bootstrap/Spinner";
import "./styles.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
function App() {
const [isSubmitted, submitForm] = React.useState(false);
return (
<Form
name="form"
onSubmit={e => {
e.preventDefault();
submitForm(true);
}}
>
<Form.Group noValidate controlId="loginForm.username">
<Form.Label>Adres e-mail</Form.Label>
<Form.Control
type="text"
name="username"
value={"aaaa"}
onChange={e => {}}
/>
</Form.Group>
<Form.Group controlId="loginForm.loginBtn">
<div className="d-flex justify-content-start">
<Button variant="primary" type="submit">
{!isSubmitted && "Zaloguj się"}
{isSubmitted && <Spinner animation="border" variant="info" />}
</Button>
</div>
</Form.Group>
</Form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
我已经使用 React.useState
钩子来改变函数中的状态。