React如何利用Antd的Form组件实现表单功能详解

 更新时间:2021年04月14日 10:55:06   作者:GuanJdoJ  
这篇文章主要给大家介绍了关于React如何利用Antd的Form组件实现表单功能的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、构造组件

1、表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。

这里先引用了封装的表单域 <Form.Item />

2、使用Form.create处理后的表单具有自动收集数据并校验的功能,但如果不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用Form.create并自行处理数据

经过Form.create()包装过的组件会自带this.props.form属性,this.props.form提供了很多API来处理数据,如getFieldDecorator——用于和表单进行双向绑定等,详细参加Antd官方文档:点击此处查看

先展示表单样式:

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: '联系人',
        dataIndex: 'userName',
        key: 'userName',
      }, {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
      }, {
        title: '公司名称',
        dataIndex: 'companyName',
        key: 'companyName',
      }, {
        title: '最近活跃时间',
        dataIndex: 'lastOnlineTime',
        key: 'lastOnlineTime',
      }, {
        title: '禁言状态',
        dataIndex: 'status',
        key: 'status',
      },
    ];
 
    return (
      <div>
        <Form layout="inline" style={{marginBottom: '10px'}}>
          <FormItem label="最近活跃时间">
            <RangePicker style={{width: '255px'}}/>
          </FormItem>
          <FormItem label="用户">
            <Input type="text" placeholder="公司名称、手机号" style={{width: '155px'}}/>
          </FormItem>
          <FormItem label="禁言状态">
            <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:列数据在数据项中对应的 key,支持a.b.c的嵌套写法

key:React 需要的 key,如果已经设置了唯一的dataIndex,可以忽略这个属性

二、使用getFieldDecorator(id, options) 进行表单交互

1、现在的问题就是如何获取各种查询条件的数据,所以先改写render()里面的代码,getFieldDecorator用于和表单进行双向绑定:

...
render(){
    const {form} = this.props;
    const {getFieldDecorator} = form;
...
    return (
      <div>
        <Form onSubmit={this.handleQuery} layout="inline" style={{marginBottom: '10px'}}>
          <FormItem label="最近活跃时间">
            {getFieldDecorator('lastOnlineTime')(<RangePicker style={{width: '255px'}}/>)}
          </FormItem>
          <FormItem label="用户">
            {getFieldDecorator('userQueryLike')(<Input type="text" placeholder="公司名称或手机号" style={{width: '155px'}}/>)}
          </FormItem>
          <FormItem label="禁言状态">
            {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取得的数据)}*/
        />
      </div>
    )
}
...

参数 说明 类型 默认值
id 必填输入控件唯一标志。支持嵌套式的写法。 string  
options.getValueFromEvent 可以把 onChange 的参数(如 event)转化为控件的值 function(..args) reference
options.initialValue 子节点的初始值,类型、可选值均由子节点决定(注意:由于内部校验时使用 === 判断是否变化,建议使用变量缓存所需设置的值而非直接使用字面量))    
options.normalize 转换默认的 value 给控件 function(value, prevValue, allValues): any -
options.rules 校验规则,详细参考Antd官方文档 object[]  
options.trigger 收集子节点的值的时机 string 'onChange'
options.validateFirst 当某一规则校验不通过时,是否停止剩下的规则的校验 boolean false
options.validateTrigger 校验子节点值的时机 string|string[] 'onChange'
options.valuePropName 子节点的值的属性,如 Switch 的是 'checked' string 'value'

2、上面给了表单一个onSubmit事件,当表单提交时执行handleQuery方法:

...
class UserManage extends React.Component {
  //表单查询
  handleQuery = (e) => {
    if (e) e.preventDefault();
    const {dispatch, form} = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      //获取时间范围的值
      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,
        }
      });
 
    });
  };
...
}
...

在此方法里又调用了form.validateFields校验并获取一组输入域的值与Error,入参fieldsValue就是从表单的FormItem里取到的值,然后使用fieldsValue['lastOnlineTime']这种形式,通过与之前写的getFieldDecorator('lastOnlineTime')产生映射,就获取了单个输入域的值。

总结一下,使用React的Form实现表单功能,必须要使用Form.create(组件),使包装的组件带有this.props.form属性,才能调用form的getFieldDecorator和validateFields方法,getFieldDecorator中的id对应validateFields中的fieldsValue[''];而columns中的dateIndex对应的是从model取到数据json串的键名,这个要分清

除了这种方法,还有两种实现获取input输入框的值然后提交的方法,可以看这篇文章:React获取input的值并提交的两种方法

总结

到此这篇关于React如何利用Antd的Form组件实现表单功能详解的文章就介绍到这了,更多相关React用Form组件实现表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 教你如何从 html 实现一个 react

    教你如何从 html 实现一个 react

    react是一个简单的javascript UI库,用于构建高效、快速的用户界面。它是一个轻量级库,因此很受欢迎。接下来通过本文给大家分享从 html 实现一个 react的方法,一起看看吧
    2021-07-07
  • react-native-fs实现文件下载、文本存储的示例代码

    react-native-fs实现文件下载、文本存储的示例代码

    本篇文章主要介绍了react-native-fs实现文件下载、文本存储的示例代码,具有一定的参考价值,有兴趣的可以了解下
    2017-09-09
  • React如何解决fetch跨域请求时session失效问题

    React如何解决fetch跨域请求时session失效问题

    这篇文章主要给大家介绍了关于React如何解决fetch跨域请求时session失效问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • webpack+react+antd脚手架优化的方法

    webpack+react+antd脚手架优化的方法

    本篇文章主要介绍了webpack+react+antd脚手架优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • react.js 获取真实的DOM节点实例(必看)

    react.js 获取真实的DOM节点实例(必看)

    下面小编就为大家带来一篇react.js 获取真实的DOM节点实例(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 详解各版本React路由的跳转的方法

    详解各版本React路由的跳转的方法

    这篇文章主要介绍了详解各版本React路由的跳转的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 详解react-router4 异步加载路由两种方法

    详解react-router4 异步加载路由两种方法

    本篇文章主要介绍了详解react-router4 异步加载路由两种方法 ,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • 详解使用React制作一个模态框

    详解使用React制作一个模态框

    这篇文章主要介绍了详解使用React制作一个模态框,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • ReactJs实现树形结构的数据显示的组件的示例

    ReactJs实现树形结构的数据显示的组件的示例

    本篇文章主要介绍了ReactJs实现树形结构的数据显示的组件的示例,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • 关于react-router/react-router-dom v4 history不能访问问题的解决

    关于react-router/react-router-dom v4 history不能访问问题的解决

    这篇文章主要给大家介绍了关于react-router/react-router-dom v4 history不能访问问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。
    2018-01-01

最新评论