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 钩子来改变函数中的状态。

这是现场示例:https://codesandbox.io/s/upbeat-cerf-rb8x1