React Bootstrap — Состояние формы и проверка, а также группы ввода

React Bootstrap — это одна из версий Bootstrap, созданная для React.

Это набор компонентов React со стилями Bootstrap.

В этой статье мы рассмотрим, как добавлять формы и группы ввода в приложение React с помощью React Bootstrap.

Библиотеки форм

Мы можем использовать библиотеки форм, чтобы упростить проверку формы.

React Bootstrap имеет интеграцию с библиотекой Formik, что позволяет нам привязывать наши входные значения к состояниям.

Он также выполняет проверку формы, когда используется с Yup.

Например, мы можем использовать его, написав:

import React from "react";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import { Formik } from "formik";
import * as yup from "yup";
import "bootstrap/dist/css/bootstrap.min.css";
const schema = yup.object({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  username: yup.string().required(),
  city: yup.string().required(),
  region: yup.string().required(),
  postalcode: yup.string().required(),
  terms: yup.bool().required()
});
export default function App() {
  return (
    <Formik
      validationSchema={schema}
      onSubmit={console.log}
      initialValues={{
        firstName: "james",
        lastName: "smith"
      }}
    >
      {({
        handleSubmit,
        handleChange,
        handleBlur,
        values,
        touched,
        isValid,
        errors
      }) => (
        <Form noValidate onSubmit={handleSubmit}>
          <Form.Row>
            <Form.Group as={Col} md="6">
              <Form.Label>First name</Form.Label>
              <Form.Control
                type="text"
                name="firstName"
                value={values.firstName}
                onChange={handleChange}
                isValid={touched.firstName && !errors.firstName}
              />
              <Form.Control.Feedback>Looks good</Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="6">
              <Form.Label>Last name</Form.Label>
              <Form.Control
                type="text"
                name="lastName"
                value={values.lastName}
                onChange={handleChange}
                isValid={touched.lastName && !errors.lastName}
              />
              <Form.Control.Feedback>Looks good</Form.Control.Feedback>
            </Form.Group>
          </Form.Row>
          <Form.Row>
            <Form.Group as={Col} md="6">
              <Form.Label>City</Form.Label>
              <Form.Control
                type="text"
                placeholder="City"
                name="city"
                value={values.city}
                onChange={handleChange}
                isInvalid={!!errors.city}
              />
              <Form.Control.Feedback type="invalid">
                {errors.city}
              </Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="3">
              <Form.Label>State</Form.Label>
              <Form.Control
                type="text"
                placeholder="Region"
                name="region"
                value={values.region}
                onChange={handleChange}
                isInvalid={!!errors.region}
              />
              <Form.Control.Feedback type="invalid">
                {errors.region}
              </Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="3">
              <Form.Label>Postal Code</Form.Label>
              <Form.Control
                type="text"
                placeholder="Postal Code"
                name="postalcode"
                value={values.postalcode}
                onChange={handleChange}
                isInvalid={!!errors.postalCode}
              />
              <Form.Control.Feedback type="invalid">
                {errors.zip}
              </Form.Control.Feedback>
            </Form.Group>
          </Form.Row>
          <Form.Group>
            <Form.Check
              required
              name="terms"
              label="Agree to terms"
              onChange={handleChange}
              isInvalid={!!errors.terms}
              feedback={errors.terms}
            />
          </Form.Group>
          <Button type="submit">Submit</Button>
        </Form>
      )}
    </Formik>
  );
}

Мы создаем проверку формы с помощью Yup, прежде чем создавать компонент.

Все поля помечены как обязательные.

Затем в компоненте мы используем компонент Formik для создания формы.

Мы устанавливаем начальные значения с помощью свойства initialValues.

Требуется обратный вызов с объектом с различными свойствами, которые мы передаем нашим компонентам управления формой.

handleSubmit передается в реквизит onSubmit элемента формы.

handleChange обновляет состояние из входных значений элементов управления формы, поэтому оно передается в свойство onChange каждого элемента управления формы.

values — это объект с введенными значениями, поэтому он передается как значение каждого элемента управления формы.

touched указывает, взаимодействовал ли пользователь с формой или нет.

Мы можем использовать это, пока проверяем правильность контроля формы.

errors — это объект с ошибками проверки формы, разделенными по полям.

Так что мы также можем использовать это в реквизите isValid.

Когда у нас это есть, у нас есть форма с проверкой, и нам не нужно писать код, чтобы установить входные значения каждого поля в качестве значения состояния и проверить их самостоятельно.

Входная группа

Мы можем использовать компонент InputGroup, чтобы добавить контент помимо поля ввода.

Например, мы можем написать:

import React from "react";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <div>
      <InputGroup className="mb-3">
        <InputGroup.Prepend>
          <InputGroup.Text>@</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl placeholder="Name" />
      </InputGroup>
    </div>
  );
}

чтобы добавить InputGroup со знаком @ слева от поля ввода.

InputGroup.Prepend позволяет нам добавлять контент слева от ввода.

Мы также можем использовать InputGroup.Append для добавления содержимого справа от ввода.

Например, мы можем написать:

import React from "react";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <div>
      <InputGroup className="mb-3">
        <FormControl placeholder="Name" />
        <InputGroup.Append>
          <InputGroup.Text>@</InputGroup.Text>
        </InputGroup.Append>
      </InputGroup>
    </div>
  );
}

Размер входной группы

Мы можем изменить размер InputGroup, используя реквизит size.

Например, мы можем написать:

import React from "react";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <div>
      <InputGroup size="sm">
        <FormControl placeholder="Name" />
        <InputGroup.Append>
          <InputGroup.Text>@</InputGroup.Text>
        </InputGroup.Append>
      </InputGroup>
    </div>
  );
}

чтобы сделать входную группу очень маленькой.

Мы также можем сделать размер очень большим, указав lg в качестве значения.

Вывод

Проверка формы может быть упрощена благодаря интеграции Formik и Yup.

Группы ввода позволяют нам добавлять содержимое слева или справа от поля ввода.