React - 表单组件

上一个

测验

下一个

React 通过第三方 UI 组件库提供表单组件。React 社区提供了大量 UI / UX 组件，选择适合我们需求的正确库很困难。Bootstrap UI 库是开发者中最受欢迎的选择之一，并且被广泛使用。React Bootstrap (https://react-bootstrap.github.io/) 已将几乎所有的 Bootstrap UI 组件移植到 React 库中，并且对 form 组件提供了最佳支持。

在本章中，我们将学习如何使用 react-bootstrap 库中的 Form 组件。

什么是 Form 组件？

表单编程是 Web 应用程序的一个亮点特性。它用于在前台从用户那里收集信息，然后传递到服务器端进行进一步处理。收集的信息会在发送到服务器之前在前台进行验证。HTML 提供了不同的输入标签，如 text、checkbox、radio 等，用于从用户那里收集不同类型的信息。

React Bootstrap 提供了几乎所有基于 Bootstrap 的表单组件。它们如下所示 −

Form

Form 组件用于渲染基本的 HTML 表单 (form)。它是最高级的表单组件。Form 组件的一些有用 props 如下所示 −

ref (ReactRef) − Ref 元素，用于访问底层 DOM 节点。
as (elementType) − 可以指定除 *<form>* 之外的其他元素。
validated (boolean) − 指定表单正在被验证。将值切换为 true 将显示表单中设置的验证样式。

一个简单的表单组件可以按以下方式使用 −

<Form>
   <!-- 使用表单控件-->
</Form>

Form.Control

Form.Control 组件通过其 type props 用于渲染各种输入元素。Form.Control 组件的一些有用 props 如下所示 −

ref (ReactRef) − Ref 元素，用于访问底层 DOM 节点。
as (elementType) − 可以指定除 *<input>* 之外的其他元素。
disabled (boolean) − 启用/禁用控件元素。
htmlSize (number) − 底层控件元素的大小。
id (string) − 控件元素的 Id。如果此处未指定，则使用父级 *Form.Group* 组件的 *controlId*。
IsInValid (boolean) − 启用/禁用与无效数据相关的样式。
IsValid (boolean) − 启用/禁用与有效数据相关的样式。
plaintext (boolean) − 启用/禁用输入并将其渲染为纯文本。与 *readonly* props 一起使用。
readOnly (boolean) − 启用/禁用控件的 readonly 属性。
size (sm | lg) − 输入元素的大小。
type (string) − 要渲染的输入元素类型。
value (string | arrayOf | number) − 底层控件的值。由 *onChange* 事件操作，初始值将默认为 *defaultValue* props。
bsPrefix (string) − 用于自定义底层 CSS 类的前缀。
onChange (boolean) − 当 *onChange* 事件触发时调用的回调函数。

一个简单的表单控件组件可以按以下方式使用 −

<>
   <Form.Control type="text" size="lg" placeholder="Large text" />
   <br />
   <Form.Control type="text" placeholder="Normal text" />
   <br />
   <Form.Control type="text" size="sm" placeholder="Small text" />
</>

Form.Label

Form.Label 组件用于渲染 HTML 标签组件 ()。Form.Label 组件的一些有用 props 如下所示 −

ref (ReactRef) − Ref 元素，用于访问底层 DOM 节点。
as (elementType) − 可以指定除 *<label>* 之外的其他元素。
htmlFor (string) − 用于指定为特定输入元素创建的标签。如果未指定 *htmlFor*，则使用顶级 *Form.Group* 组件的 *controlId*。
column (boolean | sm | lg) − 使用 *<Col>* 组件渲染标签以进行布局。
visuallyHidden (boolean) − 视觉上隐藏标签，但仍允许辅助技术使用。
bsPrefix (string) − 用于自定义底层 CSS 类的前缀。

Form.Group

Form.Group 组件用于对表单控件和标签进行分组。它将用于相对于其标签布局控件。Form.Group 组件的一些有用 props 如下所示 −

ref (ReactRef) − Ref 元素，用于访问底层 DOM 节点。
as (elementType) − 可以指定除 *<form>* 之外的其他元素。
controlId (string) − 用于引用控件和标签组的 Id。如果组内的控件没有 *Id* props，则将其用作表单控件的 id。

一个简单的表单组连同表单标签可以按以下方式使用 −

<Form.Group controlId="formFile" className="mb-3">
   <Form.Label>Upload file</Form.Label>
   <Form.Control type="file" />
</Form.Group>

Form.Text

Form.Text 组件用于为表单控件(*) 显示有用的消息。Form* 组件的一些useful props 如下所示 −

ref (ReactRef) − Ref 元素，用于访问底层 DOM 节点。
as (elementType) − 可以指定除 *<form>* 之外的其他元素。
muted (boolean) − 应用 *text-muted* 类。
bsPrefix (string) − 用于自定义底层 CSS 类的前缀。

一个简单的表单文本组件可以按以下方式使用 −

<Form.Label htmlFor="pwd">Password</Form.Label>
<Form.Control
   type="password"
   id="pwd"
   aria-describedby="passwordHelpMessage"
/>
<Form.Text id="passwordHelpMessage" muted>
   请设置 8 - 12 个字符长的密码。至少使用 1 个数字、
   1 个特殊字符和 1 个大写字母。尝试使用强密码。
</Form.Text>

Form.Select

Form.Select 组件用于渲染 select 元素(select)。Form.Select 组件的一些有用 props 如下所示 −

disabled (boolean) − 启用/禁用控件元素。
htmlSize (number) − 底层控件元素的大小。
IsInValid (boolean) − 启用/禁用与无效数据相关的样式。
IsValid (boolean) − 启用/禁用与有效数据相关的样式。
size (sm | lg) − 输入元素的大小。
value (string | arrayOf | number) − 底层控件的值。由 *onChange* 事件操作，初始值将默认为 *defaultValue* props。
bsPrefix (string) − 用于自定义底层 CSS 类的前缀。
onChange (boolean) − 当 *onChange* 事件触发时调用的回调函数。

一个简单的表单选择组件可以按以下方式使用 −

<Form.Select aria-label="Select category">
   <option value="sm">Small</option>
   <option value="lg">Large</option>
   <option value="xl">Extra large</option>
</Form.Select>

Form.Check

Form.Check 组件用于在 HTML 表单中渲染复选框 () 和单选按钮 ()。Form 组件的一些有用 props 如下所示 −

ref (ReactRef) − Ref 元素，用于访问底层 DOM 节点。
as (elementType) − 可以指定除 *<input>* 之外的其他元素。
disabled (boolean) − 启用/禁用控件元素。
id (string) − 控件元素的 Id。如果此处未指定，则使用父级 *Form.Group* 组件的 *controlId*。
children (node) − 自定义 *FormCheck* 内容的渲染。
title (string) − 底层 *FormCheckLabel* 的标题属性。
type (radio | checkbox | switch) − 要渲染的输入元素类型。
value (string | arrayOf | number) − 底层控件的值。由 *onChange* 事件操作，初始值将默认为 *defaultValue* props。
label (node) − 控件的标签。
feedback (node) − 验证过程中要渲染的反馈消息。
feedbackTooltip (boolean) − 启用/禁用将反馈消息显示为工具提示。
IsInValid (boolean) − 启用/禁用与无效数据相关的样式。
IsValid (boolean) − 启用/禁用与有效数据相关的样式。
inline (boolean) − 启用/禁用控件以水平方式布局。
reverse (boolean) − 启用/禁用子元素的反向布局。
bsPrefix (string) − 用于自定义底层 CSS 类的前缀。
bsSwitchPrefix (string) − 用于自定义开关控件底层 CSS 类的前缀。

一个简单的表单检查组件可以按以下方式使用 −

<Form.Group controlId="gender" className="mb-3">
   <Form.Label>Select your gender</Form.Label>
   <div className="mb-3">
      <Form.Check
         type='radio'
         id='Male'
         label='Male'
         name='gender'
      />
      <Form.Check
         type='radio'
         id='Female'
         label='Female'
         name='gender'
      />
   </div>
</Form.Group>

在这里，Form.Check 被分组在 Form.Group 组件下。

Form.Check.Label

Form.Check.Label 组件用于为 Form.Check 组件的底层输入渲染标签。它将作为 Form.Check 组件的子元素包含在内。Form.Check.Input 组件的一些有用 props 如下所示 −

htmlFor (string) − 用于指定为特定输入元素创建的标签。如果未指定 *htmlFor*，则使用顶级 *Form.Group* 组件的 *controlId*。
bsPrefix (string) − 用于自定义底层 CSS 类的前缀。

Form.Check.Input

Form.Check.Input 组件用于为 Form.Check 组件渲染底层输入。它将作为 Form.Check 组件的子元素包含在内。Form.Check.Input 组件的一些有用 props 如下所示 −

as (elementType) − 可以指定除 *<input>* 之外的其他元素。
id (string) − 控件元素的 Id。如果此处未指定，则使用父级 *Form.Group* 组件的 *controlId*。
type (radio | checkbox | switch) − 要渲染的输入元素类型。
IsInValid (boolean) − 启用/禁用与无效数据相关的样式。
IsValid (boolean) − 启用/禁用与有效数据相关的样式。
type (radio | checkbox) − 要渲染的输入元素类型。
bsPrefix (string) − 用于自定义底层 CSS 类的前缀。

一个简单的表单检查输入和标签组件可以按以下方式使用 −

<Form.Group controlId="gender" className="mb-3">
<Form.Label>Select your favorite programming language</Form.Label>
   <div className="mb-3">
      <Form.Check
         type='checkbox'
         id='java-lang'
         name='language'
      >
         <Form.Check.Input type='checkbox' isValid />
         <Form.Check.Label>Java</Form.Check.Label>
      </Form.Check>
      <Form.Check
         type='checkbox'
         id='c-lang'
         name='language'
      >
         <Form.Check.Input type='checkbox' isValid />
         <Form.Check.Label>C</Form.Check.Label>
      </Form.Check>
      <Form.Check
         type='checkbox'
         id='javascript-lang'
         name='language'
      >
         <Form.Check.Input type='checkbox' isValid />
         <Form.Check.Label>Javascript</Form.Check.Label>
      </Form.Check>
   </div>
</Form.Group>

Form.Range

Form.Range 组件用于在 HTML 表单中渲染范围输入控件。Form.Range 组件的一些有用 props 如下所示 −

disabled (boolean) − 启用/禁用控件元素。
id (string) − 控件元素的 Id。如果此处未指定，则使用父级 *Form.Group* 组件的 *controlId*。
value (string | arrayOf | number) − 底层控件的值。由 *onChange* 事件操作，初始值将默认为 *defaultValue* props。
bsPrefix (string) − 用于自定义底层 CSS 类的前缀。

一个简单的表单范围组件可以按以下方式使用 −

<Form.Label>Select by range</Form.Label>
<Form.Range value="25"/>

InputGroup

InputGroup 组件用于对多个输入和文本组件进行分组，并以简单易用的方式生成新的高级组件。InputGroup 组件的一些有用 props 如下所示 −

as (elementType) − 可以指定除 *<div>* 之外的其他元素。
hasValidation (boolean) − 当输入组包含输入和反馈元素时使用。
size (sm | lg) − 控件的大小。由组件内部处理。
bsPrefix (string) − 用于自定义底层 CSS 类的前缀。

InputGroup.Text

InputGroup.Text 组件用于在 InputGroup.Text 组件内部渲染文本。Form 组件的一些有用 props 如下所示 −

id (string) − 节点 Id。

一个简单的输入组和文本组件可以按以下方式使用 −

<Form.Group controlId="email" className="mb-3">
   <Form.Label>Enter your email address</Form.Label>
   <InputGroup className="mb-3">
      <Form.Control
         aria-label="Email address"
         aria-describedby="domain"
      />
      <InputGroup.Text id="domain">@example.com</InputGroup.Text>
   </InputGroup>
</Form.Group>

应用 Form 组件

首先，使用以下命令创建一个新的 React 应用并启动它。

create-react-app myapp
cd myapp
npm start

接下来，使用以下命令安装 bootstrap 和 react-bootstrap 库，

npm install --save bootstrap react-bootstrap

接下来，打开 App.css (src/App.css) 并删除所有 CSS 类。

// 删除所有 css 类

接下来，创建一个简单的表单组件 SimpleForm (src/Components/SimpleForm.js)，并按以下所示渲染表单 −

import { Form, Button } from 'react-bootstrap';
function SimpleForm() {
   return (
      <Form>
         <Form.Group className="mb-3" controlId="email">
            <Form.Label>Email address</Form.Label>
            <Form.Control type="email" placeholder="Enter email" />
            <Form.Text className="text-muted">
               This email address will be used for communication purpose.
            </Form.Text>
         </Form.Group>
         <Form.Group className="mb-3" controlId="password">
            <Form.Label>Password</Form.Label>
            <Form.Control type="password" placeholder="Password" />
         </Form.Group>
         <Form.Group className="mb-3" controlId="formBasicCheckbox">
            <Form.Check type="checkbox" label="Save password" />
         </Form.Group>
         <Button variant="primary" type="submit">
            Submit
         </Button>
      </Form>
   );
}
export default SimpleForm;

这里，

使用带有 text 和 password 类型的 Form.Control 分别获取用户名和密码。
使用 Button 组件提交表单
使用 Form.Group 将表单控件组件及其相关的标签组件分组

接下来，打开 App 组件 (src/App.js)，导入 bootstrap css，并使用以下所示的 bootstrap 按钮更新内容 −

import './App.css'
import "bootstrap/dist/css/bootstrap.min.css";
import SimpleForm from './Components/SimpleForm'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleForm />
            </div>
         </div>
      </div>
   );
}
export default App;

这里，

使用 import 语句导入了 bootstrap 类
渲染了我们的新 SimpleForm 组件。
包含了 App.css 样式

最后，在浏览器中打开应用并检查最终结果。表单将按以下所示渲染 −

总结

Bootstrap 表单组件提供了设计美观表单所需的所有选项。它利用了 bootstrap CSS 框架，并提供了易于使用的 props 来对表单进行深度定制。

笙亿网络策划

React 表单组件怎么用？

React - 表单组件

什么是 Form 组件？

Form

Form.Control

Form.Label

Form.Group

Form.Text

Form.Select

Form.Check

Form.Check.Label

Form.Check.Input

Form.Range

InputGroup

InputGroup.Text

应用 Form 组件

总结

React 表单组件怎么用？

React - 表单组件

什么是 Form 组件？

Form

Form.Control

Form.Label

Form.Group

Form.Text

Form.Select

Form.Check

Form.Check.Label

Form.Check.Input

Form.Range

InputGroup

InputGroup.Text

应用 Form 组件

总结

相关问答