ReactJS - 表單元件

上一頁
下一頁

React 透過第三方 UI 元件庫提供表單元件。React 社群提供了大量的 UI/UX 元件，選擇合適的庫來滿足我們的需求是一件很困難的事情。Bootstrap UI 庫是開發者比較流行的選擇之一，並且被廣泛使用。React Bootstrap (https://react-bootstrap.github.io/) 幾乎將所有 Bootstrap UI 元件移植到了 React 庫中，並且對表單元件也有最好的支援。

讓我們學習如何在本章中使用 react-bootstrap 庫中的表單元件。

什麼是表單元件？

表單程式設計是 Web 應用的一個突出特性。它用於在前端收集使用者資訊，然後將其傳遞給伺服器端進行進一步處理。收集到的資訊會在傳送到伺服器之前在前端進行驗證。HTML 具有不同的輸入標籤，如文字、複選框、單選按鈕等，用於從使用者那裡收集不同型別的資訊。

React Bootstrap 提供了幾乎所有基於 Bootstrap 的表單元件。它們如下所示：

Form

Form 元件用於渲染基本的 HTML 表單 (form)。它是最高層的表單元件。Form 元件的一些有用屬性如下：

  • ref (ReactRef) - 訪問底層 DOM 節點的 Ref 元素。

  • as (elementType) - 允許指定除 *<form>* 之外的其他元素。

  • validated (boolean) - 指定表單正在被驗證。將值切換為 true 將顯示在表單中設定的驗證樣式。

一個簡單的表單元件可以如下所示使用：

<Form>
   <!-- Use form control-->
</Form>

Form.Control

Form.Control 元件用於透過其 type 屬性渲染各種輸入元素。Form.Control 元件的一些有用屬性如下：

  • ref (ReactRef) - 訪問底層 DOM 節點的 Ref 元素。

  • as (elementType) - 允許指定除 *<input>* 之外的其他元素。

  • disabled (boolean) - 啟用/停用控制元素。

  • htmlSize (number) - 底層控制元素的大小。

  • id (string) - 控制元素的 ID。如果此處未指定，則使用父 *Form.Group* 元件的 *controlId*。

  • isInValid (boolean) - 啟用/停用與無效資料關聯的樣式。

  • isValid (boolean) - 啟用/停用與有效資料關聯的樣式。

  • plaintext (boolean) - 啟用/停用輸入並將其呈現為純文字。與 *readonly* 屬性一起使用。

  • readOnly (boolean) - 啟用/停用控制元素的只讀屬性。

  • size (sm | lg) - 輸入元素的大小。

  • type (string) - 要渲染的輸入元素的型別。

  • value (string | arrayOf | number) - 底層控制元件的值。由 *onChange* 事件操作，初始值將預設為 *defaultValue* 屬性

  • 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 Component

Form.Label

Form.Label 元件用於渲染 HTML 標籤元件 (<label>)。Form.Label 元件的一些有用屬性如下：

  • ref (ReactRef) - 訪問底層 DOM 節點的 Ref 元素。

  • 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 元件的一些有用屬性如下：

  • ref (ReactRef) - 訪問底層 DOM 節點的 Ref 元素。

  • as (elementType) - 允許指定除 *<form>* 之外的其他元素。

  • controlId (string) - 用於引用控制元件和標籤組的 ID。如果控制元件沒有 *Id* 屬性，它將用作組內表單控制元件的 ID。

一個簡單的表單組以及表單標籤可以如下所示使用：

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

Form.Text

Form.Text 元件用於顯示錶單控制元件的有用訊息 (<small>)。Form.Text 元件的一些有用屬性如下：

  • ref (ReactRef) - 訪問底層 DOM 節點的 Ref 元素。

  • 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>
   Please set password within 8 - 12 characters long. Use minimum of 1 digit,
   1 special character and 1 capital letter. Try to use strong password.
</Form.Text>
Form Component

Form.Select

Form.Select 元件用於渲染選擇元素 (<select>)。Form.Select 元件的一些有用屬性如下：

  • disabled (boolean) - 啟用/停用控制元素。

  • htmlSize (number) - 底層控制元素的大小。

  • isInValid (boolean) - 啟用/停用與無效資料關聯的樣式。

  • isValid (boolean) - 啟用/停用與有效資料關聯的樣式。

  • size (sm | lg) - 輸入元素的大小。

  • value (string | arrayOf | number) - 底層控制元件的值。由 *onChange* 事件操作，初始值將預設為 *defaultValue* 屬性。

  • 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 Component

Form.Check

Form.Check 元件用於在 HTML 表單中渲染複選框 (<input type="checkbox">) 和單選按鈕 (<input type="radio">)。Form.Check 元件的一些有用屬性如下：

  • ref (ReactRef) - 訪問底層 DOM 節點的 Ref 元素。

  • 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* 屬性。

  • 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 Component

Form.Check.Label

Form.Check.Label 元件用於為 Form.Check 元件的底層輸入渲染標籤。它將作為 Form.Check 元件的子元素包含在內。Form.Check.Input 元件的一些有用屬性如下：

  • htmlFor (string) - 用於指定為其建立特定標籤的輸入元素。如果未指定 *htmlFor*，則它將使用頂級 *Form.Group* 元件的 *controlId*。

  • bsPrefix (string) - 用於自定義底層 CSS 類的字首

Form.Check.Input

Form.Check.Input 元件用於為 Form.Check 元件渲染底層輸入。它將作為 Form.Check 元件的子元素包含在內。Form.Check.Input 元件的一些有用屬性如下：

  • as (elementType) - 允許指定除 *<input>* 之外的其他元素。

  • id (string) - 控制元素的 ID。如果此處未指定，則使用父 *Form.Group* 元件的 *controlId*。

  • type (radio | checkbox | switch) - 要渲染的輸入元素的型別。

  • isInValid (boolean) - 啟用/停用與無效資料關聯的樣式。

  • isValid (boolean) - 啟用/停用與有效資料關聯的樣式。

  • 型別 (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 Component

Form.Range

Form.Range 元件用於在 HTML 表單中渲染範圍輸入控制元件。一些有用的屬性如下：

  • disabled (boolean) - 啟用/停用控制元素。

  • id (string) - 控制元素的 ID。如果此處未指定，則使用父 *Form.Group* 元件的 *controlId*。

  • value (string | arrayOf | number) - 底層控制元件的值。由 *onChange* 事件操作，初始值將預設為 *defaultValue* 屬性。

  • bsPrefix (string) - 用於自定義底層 CSS 類的字首。

一個簡單的表單範圍元件，使用方法如下：

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

InputGroup

InputGroup 元件用於組合多個輸入和文字元件，並以簡單易行的方式生成新的高階元件。InputGroup 元件的一些有用屬性如下：

  • as (elementType) − 允許指定除 *<div>* 之外的其他元素。

  • hasValidation (boolean) − 當輸入組同時包含輸入和反饋元素時使用。

  • size (sm | lg) − 控制元件的大小。元件內部會處理。

  • bsPrefix (string) - 用於自定義底層 CSS 類的字首。

InputGroup.Text

InputGroup.Text 元件用於在 InputGroup.Text 元件內渲染文字。表單元件的一些有用屬性如下：

  • 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">@tutorialspoint.com</InputGroup.Text>
   </InputGroup>
</Form.Group>
InputGroup

應用 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 類。

// remove all css classes

接下來，建立一個簡單的表單元件 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;

這裡：

  • 使用 Form.Control，型別分別為 text 和 password，來獲取使用者名稱和密碼。

  • 使用 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 樣式。

最後，在瀏覽器中開啟應用程式並檢查最終結果。表單將按如下所示渲染：

Applying Form Component

總結

Bootstrap 表單元件提供了設計美觀表單所需的所有選項。它利用 Bootstrap CSS 框架，並提供易於使用的屬性來進行表單的高度定製。

列印頁面
上一頁
下一頁
廣告