Reactstrap - проверка формы и настройки

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

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

В этой статье мы рассмотрим, как добавить проверку формы и настройки с помощью Reactstrap.

Проверка формы

В Reactstrap есть стили для проверки формы.

Мы можем применить их с помощью реквизита valid и invalid.

Например, мы можем добавить поля формы с этими стилями, написав:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Form,
  FormGroup,
  Label,
  Input,
  FormFeedback,
  FormText
} from "reactstrap";
export default function App() {
  return (
    <div>
      <Form>
        <FormGroup>
          <Label for="exampleEmail">Input without validation</Label>
          <Input />
          <FormFeedback>can't see this</FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
        <FormGroup>
          <Label>Valid input</Label>
          <Input valid />
          <FormFeedback valid>looks good</FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
        <FormGroup>
          <Label>Invalid input</Label>
          <Input invalid />
          <FormFeedback>invalid input</FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
        <FormGroup>
          <Label>Input without validation</Label>
          <Input />
          <FormFeedback tooltip>looks good</FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
        <FormGroup>
          <Label>Valid input</Label>
          <Input valid />
          <FormFeedback valid tooltip>
            looks good
          </FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
        <FormGroup>
          <Label>Invalid input</Label>
          <Input invalid />
          <FormFeedback tooltip>invalid input</FormFeedback>
          <FormText>some text.</FormText>
        </FormGroup>
      </Form>
    </div>
  );
}

У нас есть разные вещи в этой форме.

Свойства valid или invalid добавляются к Input, чтобы стилизовать их в соответствии с их достоверностью.

Мы помещаем отзывы о валидации в компонент FormFeedback.

valid и invalid также могут быть добавлены к FormFeedback, чтобы стилизовать их.

tooltip превращает форму обратной связи в всплывающую подсказку.

Допустимые входы будут зелеными.

Недействительные вводы будут красными.

Также справа от поля ввода есть значок.

Встроенные флажки

Мы можем добавить встроенные флажки с помощью свойств check и inline.

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

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Form, FormGroup, Label, Input } from "reactstrap";
export default function App() {
  return (
    <div>
      <Form>
        <FormGroup check inline>
          <Label check>
            <Input type="checkbox" /> apple
          </Label>
        </FormGroup>
        <FormGroup check inline>
          <Label check>
            <Input type="checkbox" /> orange
          </Label>
        </FormGroup>
      </Form>
    </div>
  );
}

Мы добавляем оба свойства к FormGroup, чтобы сделать его встроенным.

Кроме того, мы добавили опору check к Label, чтобы он отображал флажок со стилями Bootstrap.

Размер входа

Размер входов можно изменить с помощью bsSize prop.

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

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Form, Input } from "reactstrap";
export default function App() {
  return (
    <div>
      <Form>
        <Input placeholder="lg" bsSize="lg" />
        <Input placeholder="default" />
        <Input placeholder="sm" bsSize="sm" />
        <Input type="select" bsSize="lg">
          <option>Large</option>
        </Input>
        <Input type="select">
          <option>Default</option>
        </Input>
        <Input type="select" bsSize="sm">
          <option>Small</option>
        </Input>
      </Form>
    </div>
  );
}

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

Размер входной сетки

Мы можем изменить размер входной сетки с помощью size prop.

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

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Col, Form, FormGroup, Label, Input } from "reactstrap";
export default function App() {
  return (
    <div>
      <Form>
        <FormGroup row>
          <Label for="email" sm={2} size="lg">
            Email
          </Label>
          <Col sm={10}>
            <Input
              type="email"
              name="email"
              id="email"
              placeholder="lg"
              bsSize="lg"
            />
          </Col>
        </FormGroup>
        <FormGroup row>
          <Label for="email2" sm={2}>
            Email
          </Label>
          <Col sm={10}>
            <Input
              type="email"
              name="email"
              id="email2"
              placeholder="default"
            />
          </Col>
        </FormGroup>
      </Form>
    </div>
  );
}

У нас есть компонент FormGroup с опорой row, чтобы они отображались в виде строк.

И у нас есть подпорка size на этикетке и bsSize на входе, чтобы изменить их размер.

Скрытые ярлыки

Мы можем добавить скрытые метки в нашу форму с помощью hidden prop.

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

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Form, FormGroup, Label, Input } from "reactstrap";
export default function App() {
  return (
    <div>
      <Form inline>
        <FormGroup>
          <Label for="email" hidden>
            Email
          </Label>
          <Input type="email" name="email" id="email" placeholder="Email" />
        </FormGroup>
        <FormGroup>
          <Label for="password" hidden>
            Password
          </Label>
          <Input
            type="password"
            name="password"
            id="password"
            placeholder="Password"
          />
        </FormGroup>
        <Button>Submit</Button>
      </Form>
    </div>
  );
}

чтобы добавить hidden реквизита к этикеткам.

Теперь мы их не увидим.

Заключение

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

Кроме того, можно добавлять скрытые метки и изменять размеры с помощью реквизита.