当前位置：首页 > news >正文

React 表单组件怎么用？

news 2026/4/25 17:21:48

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组件通过其typeprops 用于渲染各种输入元素。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* 组件的一些usefulprops 如下所示 −

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 类的前缀。
文章来源 https://www.zjcp.cc/ask/7017.html

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

<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;

这里，