快捷導(dǎo)航

React如何利用Antd的Form組件實(shí)現(xiàn)表單功能詳解

更新時(shí)間：2021年04月14日 10:55:06 作者：GuanJdoJ

這篇文章主要給大家介紹了關(guān)于React如何利用Antd的Form組件實(shí)現(xiàn)表單功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、構(gòu)造組件

1、表單一定會(huì)包含表單域，表單域可以是輸入控件，標(biāo)準(zhǔn)表單域，標(biāo)簽，下拉菜單，文本域等。

這里先引用了封裝的表單域 <Form.Item />

2、使用Form.create處理后的表單具有自動(dòng)收集數(shù)據(jù)并校驗(yàn)的功能，但如果不需要這個(gè)功能，或者默認(rèn)的行為無(wú)法滿足業(yè)務(wù)需求，可以選擇不使用Form.create并自行處理數(shù)據(jù)

經(jīng)過(guò)Form.create()包裝過(guò)的組件會(huì)自帶this.props.form屬性，this.props.form提供了很多API來(lái)處理數(shù)據(jù)，如getFieldDecorator——用于和表單進(jìn)行雙向綁定等，詳細(xì)參加Antd官方文檔：點(diǎn)擊此處查看

先展示表單樣式：

import React from 'react';
import {Form, Table, Button, Select, Input, DatePicker} from 'antd';
 
const FormItem = Form.Item;
const Option = Select.Option;
const {RangePicker} = DatePicker;//獲取日期選擇控件中的日期范圍控件
 
class UserManage extends React.Component {
  render() {
    const columns = [
      {
        title: '聯(lián)系人',
        dataIndex: 'userName',
        key: 'userName',
      }, {
        title: '手機(jī)號(hào)',
        dataIndex: 'mobile',
        key: 'mobile',
      }, {
        title: '公司名稱',
        dataIndex: 'companyName',
        key: 'companyName',
      }, {
        title: '最近活躍時(shí)間',
        dataIndex: 'lastOnlineTime',
        key: 'lastOnlineTime',
      }, {
        title: '禁言狀態(tài)',
        dataIndex: 'status',
        key: 'status',
      },
    ];
 
    return (
      <div>
        <Form layout="inline" style={{marginBottom: '10px'}}>
          <FormItem label="最近活躍時(shí)間">
            <RangePicker style={{width: '255px'}}/>
          </FormItem>
          <FormItem label="用戶">
            <Input type="text" placeholder="公司名稱、手機(jī)號(hào)" style={{width: '155px'}}/>
          </FormItem>
          <FormItem label="禁言狀態(tài)">
            <Select defaultValue="全部" style={{width: '155px'}}>
              <Option value="全部">全部</Option>
              <Option value="是">是</Option>
              <Option value="否">否</Option>
            </Select>
          </FormItem>
          <Button type="primary" style={{marginTop: '3px', marginRight: '3px'}}>查詢</Button>
          <Button style={{marginTop: '3px'}}>重置</Button>
        </Form>
        <Table
          columns={columns}
        />
      </div>
    )
  }
}
 
export default Form.create()(UserManage)

colums是Table組件的API，columns和Column組件使用相同的API：

dataIndex：列數(shù)據(jù)在數(shù)據(jù)項(xiàng)中對(duì)應(yīng)的 key，支持a.b.c的嵌套寫法

key：React 需要的 key，如果已經(jīng)設(shè)置了唯一的dataIndex，可以忽略這個(gè)屬性

二、使用getFieldDecorator(id, options) 進(jìn)行表單交互

1、現(xiàn)在的問(wèn)題就是如何獲取各種查詢條件的數(shù)據(jù)，所以先改寫render()里面的代碼，getFieldDecorator用于和表單進(jìn)行雙向綁定：

...
render(){
    const {form} = this.props;
    const {getFieldDecorator} = form;
...
    return (
      <div>
        <Form onSubmit={this.handleQuery} layout="inline" style={{marginBottom: '10px'}}>
          <FormItem label="最近活躍時(shí)間">
            {getFieldDecorator('lastOnlineTime')(<RangePicker style={{width: '255px'}}/>)}
          </FormItem>
          <FormItem label="用戶">
            {getFieldDecorator('userQueryLike')(<Input type="text" placeholder="公司名稱或手機(jī)號(hào)" style={{width: '155px'}}/>)}
          </FormItem>
          <FormItem label="禁言狀態(tài)">
            {getFieldDecorator('status', {initialValue: "全部"})(
            <Select  style={{width: '155px'}}>
              <Option value="0">全部</Option>
              <Option value="1">是</Option>
              <Option value="2">否</Option>
            </Select>)}
          </FormItem>
          <Button type="primary" htmlType="submit" style={{marginTop: '3px', marginRight: '3px'}}>查詢</Button>
          <Button style={{marginTop: '3px'}}>重置</Button>
        </Form>
        <Table
          columns={columns} /*dataSource={(從model取得的數(shù)據(jù))}*/
        />
      </div>
    )
}
...

參數(shù)	說(shuō)明	類型	默認(rèn)值
id	必填輸入控件唯一標(biāo)志。支持嵌套式的寫法。	string
options.getValueFromEvent	可以把 onChange 的參數(shù)（如 event）轉(zhuǎn)化為控件的值	function(..args)	reference
options.initialValue	子節(jié)點(diǎn)的初始值，類型、可選值均由子節(jié)點(diǎn)決定(注意：由于內(nèi)部校驗(yàn)時(shí)使用 `===` 判斷是否變化，建議使用變量緩存所需設(shè)置的值而非直接使用字面量))
options.normalize	轉(zhuǎn)換默認(rèn)的 value 給控件	function(value, prevValue, allValues): any	-
options.rules	校驗(yàn)規(guī)則，詳細(xì)參考Antd官方文檔	object[]
options.trigger	收集子節(jié)點(diǎn)的值的時(shí)機(jī)	string	'onChange'
options.validateFirst	當(dāng)某一規(guī)則校驗(yàn)不通過(guò)時(shí)，是否停止剩下的規(guī)則的校驗(yàn)	boolean	false
options.validateTrigger	校驗(yàn)子節(jié)點(diǎn)值的時(shí)機(jī)	string\|string[]	'onChange'
options.valuePropName	子節(jié)點(diǎn)的值的屬性，如 Switch 的是 'checked'	string	'value'

2、上面給了表單一個(gè)onSubmit事件，當(dāng)表單提交時(shí)執(zhí)行handleQuery方法：

...
class UserManage extends React.Component {
  //表單查詢
  handleQuery = (e) => {
    if (e) e.preventDefault();
    const {dispatch, form} = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      //獲取時(shí)間范圍的值
      const rangeValue = fieldsValue['lastOnlineTime'];
      const userQueryLike = fieldsValue['userQueryLike'];
      //獲取查詢條件
      const values = {
        ...fieldsValue,
        "lastOnlineTime": (rangeValue && rangeValue.length > 1) ?
          ([rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]) : null,
        "userQueryLike": userQueryLike ? userQueryLike.trim() : userQueryLike,
      };
      dispatch({
        type: "userManageModel/getUserList",
        payload: {
          values: values,
        }
      });
 
    });
  };
...
}
...

在此方法里又調(diào)用了form.validateFields校驗(yàn)并獲取一組輸入域的值與Error，入?yún)ieldsValue就是從表單的FormItem里取到的值，然后使用fieldsValue['lastOnlineTime']這種形式，通過(guò)與之前寫的getFieldDecorator('lastOnlineTime')產(chǎn)生映射，就獲取了單個(gè)輸入域的值。

總結(jié)一下，使用React的Form實(shí)現(xiàn)表單功能，必須要使用Form.create(組件)，使包裝的組件帶有this.props.form屬性，才能調(diào)用form的getFieldDecorator和validateFields方法，getFieldDecorator中的id對(duì)應(yīng)validateFields中的fieldsValue['']；而columns中的dateIndex對(duì)應(yīng)的是從model取到數(shù)據(jù)json串的鍵名，這個(gè)要分清

除了這種方法，還有兩種實(shí)現(xiàn)獲取input輸入框的值然后提交的方法，可以看這篇文章：React獲取input的值并提交的兩種方法

總結(jié)

到此這篇關(guān)于React如何利用Antd的Form組件實(shí)現(xiàn)表單功能詳解的文章就介紹到這了,更多相關(guān)React用Form組件實(shí)現(xiàn)表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: