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 的表单组件。它们如下所示 −FormForm组件用于渲染基本的 HTML 表单 (form)。它是最高级的表单组件。Form组件的一些有用 props 如下所示 −ref (ReactRef)− Ref 元素用于访问底层 DOM 节点。as (elementType)− 可以指定除 *form* 之外的其他元素。validated (boolean)− 指定表单正在被验证。将值切换为 true 将显示表单中设置的验证样式。一个简单的表单组件可以按以下方式使用 −Form !-- 使用表单控件-- /FormForm.ControlForm.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 typetext sizelg placeholderLarge text / br / Form.Control typetext placeholderNormal text / br / Form.Control typetext sizesm placeholderSmall text / /Form.LabelForm.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.GroupForm.Group组件用于对表单控件和标签进行分组。它将用于相对于其标签布局控件。Form.Group组件的一些有用 props 如下所示 −ref (ReactRef)− Ref 元素用于访问底层 DOM 节点。as (elementType)− 可以指定除 *form* 之外的其他元素。controlId (string)− 用于引用控件和标签组的 Id。如果组内的控件没有 *Id* props则将其用作表单控件的 id。一个简单的表单组连同表单标签可以按以下方式使用 −Form.Group controlIdformFile classNamemb-3 Form.LabelUpload file/Form.Label Form.Control typefile / /Form.GroupForm.TextForm.Text组件用于为表单控件(*) 显示有用的消息。Form* 组件的一些usefulprops 如下所示 −ref (ReactRef)− Ref 元素用于访问底层 DOM 节点。as (elementType)− 可以指定除 *form* 之外的其他元素。muted (boolean)− 应用 *text-muted* 类。bsPrefix (string)− 用于自定义底层 CSS 类的前缀。一个简单的表单文本组件可以按以下方式使用 −Form.Label htmlForpwdPassword/Form.Label Form.Control typepassword idpwd aria-describedbypasswordHelpMessage / Form.Text idpasswordHelpMessage muted 请设置 8 - 12 个字符长的密码。至少使用 1 个数字、 1 个特殊字符和 1 个大写字母。尝试使用强密码。 /Form.TextForm.SelectForm.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-labelSelect category option valuesmSmall/option option valuelgLarge/option option valuexlExtra large/option /Form.SelectForm.CheckForm.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 controlIdgender classNamemb-3 Form.LabelSelect your gender/Form.Label div classNamemb-3 Form.Check typeradio idMale labelMale namegender / Form.Check typeradio idFemale labelFemale namegender / /div /Form.Group在这里Form.Check被分组在 Form.Group 组件下。Form.Check.LabelForm.Check.Label组件用于为 Form.Check 组件的底层输入渲染标签。它将作为Form.Check组件的子元素包含在内。Form.Check.Input组件的一些有用 props 如下所示 −htmlFor (string)− 用于指定为特定输入元素创建的标签。如果未指定 *htmlFor*则使用顶级 *Form.Group* 组件的 *controlId*。bsPrefix (string)− 用于自定义底层 CSS 类的前缀。Form.Check.InputForm.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 controlIdgender classNamemb-3 Form.LabelSelect your favorite programming language/Form.Label div classNamemb-3 Form.Check typecheckbox idjava-lang namelanguage Form.Check.Input typecheckbox isValid / Form.Check.LabelJava/Form.Check.Label /Form.Check Form.Check typecheckbox idc-lang namelanguage Form.Check.Input typecheckbox isValid / Form.Check.LabelC/Form.Check.Label /Form.Check Form.Check typecheckbox idjavascript-lang namelanguage Form.Check.Input typecheckbox isValid / Form.Check.LabelJavascript/Form.Check.Label /Form.Check /div /Form.GroupForm.RangeForm.Range组件用于在 HTML 表单中渲染范围输入控件。Form.Range组件的一些有用 props 如下所示 −disabled (boolean)− 启用/禁用控件元素。id (string)− 控件元素的 Id。如果此处未指定则使用父级 *Form.Group* 组件的 *controlId*。value (string | arrayOf | number)− 底层控件的值。由 *onChange* 事件操作初始值将默认为 *defaultValue* props。bsPrefix (string)− 用于自定义底层 CSS 类的前缀。一个简单的表单范围组件可以按以下方式使用 −Form.LabelSelect by range/Form.Label Form.Range value25/InputGroupInputGroup组件用于对多个输入和文本组件进行分组并以简单易用的方式生成新的高级组件。InputGroup 组件的一些有用 props 如下所示 −as (elementType)− 可以指定除 *div* 之外的其他元素。hasValidation (boolean)− 当输入组包含输入和反馈元素时使用。size (sm | lg)− 控件的大小。由组件内部处理。bsPrefix (string)− 用于自定义底层 CSS 类的前缀。InputGroup.TextInputGroup.Text组件用于在 InputGroup.Text 组件内部渲染文本。Form 组件的一些有用 props 如下所示 −id (string)− 节点 Id。一个简单的输入组和文本组件可以按以下方式使用 −Form.Group controlIdemail classNamemb-3 Form.LabelEnter your email address/Form.Label InputGroup classNamemb-3 Form.Control aria-labelEmail address aria-describedbydomain / InputGroup.Text iddomainexample.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 classNamemb-3 controlIdemail Form.LabelEmail address/Form.Label Form.Control typeemail placeholderEnter email / Form.Text classNametext-muted This email address will be used for communication purpose. /Form.Text /Form.Group Form.Group classNamemb-3 controlIdpassword Form.LabelPassword/Form.Label Form.Control typepassword placeholderPassword / /Form.Group Form.Group classNamemb-3 controlIdformBasicCheckbox Form.Check typecheckbox labelSave password / /Form.Group Button variantprimary typesubmit 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 classNamecontainer div style{{ padding: 10px }} div SimpleForm / /div /div /div ); } export default App;这里使用import语句导入了 bootstrap 类渲染了我们的新SimpleForm组件。包含了 App.css 样式最后在浏览器中打开应用并检查最终结果。表单将按以下所示渲染 −总结Bootstrap 表单组件提供了设计美观表单所需的所有选项。它利用了 bootstrap CSS 框架并提供了易于使用的 props 来对表单进行深度定制。