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

JavaScript

JavaScript ASP.NET PHP编程正则表达式 AJAX相关 ASP编程 JSP编程编程10000问 CSS/HTML Flex 脚本加解密 web2.0 XML/RSS 网页编辑器相关技巧安全相关网页播放器 Dart Vue.js

上一篇: CocosCreator通用框架设计之网络下一篇:React获取input值并提交的2种方法...

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

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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>
    )
}
...

@H_126_143@

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) &#63;
          ([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组件实现表单内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的React如何利用Antd的Form组件实现表单功能详解全部内容，希望文章能够帮你解决React如何利用Antd的Form组件实现表单功能详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：input input react 赋值赋值

上一篇: CocosCreator通用框架设计之网络下一篇:React获取input值并提交的2种方法...

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16

全站导航更多

最新JavaScript教程

热门JavaScript教程

参数	说明	类型	默认值
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'