ReactJS Reactstrap 表单组件

ReactJS 是一个用于构建用户界面的开源 JavaScript 库。Reactstrap 则是一个基于 Bootstrap CSS 框架的 React 组件库，为 React 应用中的 UI 元素提供了丰富的组件。

Reactstrap 包含众多表单组件，可以轻松地在 React 应用中实现各种表单功能。本文将介绍 Reactstrap 表单组件的使用方法及示例。

安装 Reactstrap

Reactstrap 通过 NPM 管理包的安装。

通过以下命令安装 Reactstrap：

npm install --save reactstrap react react-dom

在应用中引入样式文件：

import 'bootstrap/dist/css/bootstrap.min.css';

Reactstrap 表单组件

表单

Reactstrap 的 <Form> 组件提供了基本的表单功能。

import { Form, FormGroup, Label, Input } from 'reactstrap';

function ExampleForm() {
  return (
    <Form>
      <FormGroup>
        <Label for="exampleEmail">Email</Label>
        <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
      </FormGroup>
      <FormGroup>
        <Label for="examplePassword">Password</Label>
        <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
      </FormGroup>
    </Form>
  );
}

输入框

Reactstrap 的 <Input> 组件实现了输入框的功能。

import { Input } from 'reactstrap';

function ExampleInput() {
  return (
    <div>
      <Input placeholder="Enter text here" />
    </div>
  );
}

可以指定不同类型的输入框：

import { Input } from 'reactstrap';

function ExampleInputTypes() {
  return (
    <div>
      <Input type="text" placeholder="Text input" />
      <Input type="email" placeholder="Email input" />
      <Input type="password" placeholder="Password input" />
      <Input type="number" placeholder="Number input" />
      <Input type="textarea" placeholder="Textarea" />
    </div>
  );
}

下拉框

Reactstrap 的 <Dropdown> 和 <DropdownToggle> 组件实现了下拉框的功能。

import React, { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

function ExampleDropdown() {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen(!dropdownOpen);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>
        Dropdown
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Option 1</DropdownItem>
        <DropdownItem>Option 2</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Reset</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

单选框

Reactstrap 的 <FormGroup>、<Label> 和 <Input> 组件实现了单选框的功能。

import { FormGroup, Label, Input } from 'reactstrap';

function ExampleRadios() {
  return (
    <FormGroup tag="fieldset">
      <legend>Radio Buttons</legend>
      <FormGroup check>
        <Label check>
          <Input type="radio" name="radio1" />{' '}
          Option one is this and that—be sure to include why it's great
        </Label>
      </FormGroup>
      <FormGroup check>
        <Label check>
          <Input type="radio" name="radio1" />{' '}
          Option two can be something else and selecting it will deselect option one
        </Label>
      </FormGroup>
      <FormGroup check disabled>
        <Label check>
          <Input type="radio" name="radio1" disabled />{' '}
          Option three is disabled
        </Label>
      </FormGroup>
    </FormGroup>
  );
}

复选框

Reactstrap 的 <FormGroup>、<Label> 和 <Input> 组件实现了复选框的功能。

import { FormGroup, Label, Input } from 'reactstrap';

function ExampleCheckboxes() {
  return (
    <FormGroup tag="fieldset">
      <legend>Checkboxes</legend>
      <FormGroup check>
        <Label check>
          <Input type="checkbox" />{' '}
          Option one is this and that—be sure to include why it's great
        </Label>
      </FormGroup>
      <FormGroup check>
        <Label check>
          <Input type="checkbox" />{' '}
          Option two can be something else and selecting it will deselect option one
        </Label>
      </FormGroup>
      <FormGroup check disabled>
        <Label check>
          <Input type="checkbox" disabled />{' '}
          Option three is disabled
        </Label>
      </FormGroup>
    </FormGroup>
  );
}