Android实现AntDesign自定义表单组件-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

Android实现AntDesign自定义表单组件-创新互联

Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法(使用起来确实很爽),这时需要自己动手封装一些表单,同时我们还要保持方法可以继续是使用。

广阳网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。成都创新互联于2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联

  组件的源码    https://github.com/haozhaohang/ant-design-expand-component

  下面看一下如何自己封装表单组件,这是一个最基础的表单使用例子:

import React, { PureComponent } from 'react'
import { Button, Form, Input, Radio } from 'antd'
import FormItem from 'components/FormItem'
const RadioGroup = Radio.Group
const options = [
  { label: '男', value: 1 },
  { label: '女', value: 2 },
]
class Test extends PureComponent {
  handleSubmit = (e) => {
    e.preventDefault();
    const { form: { validateFields } } = this.props;
    validateFields((errors, values) => {
      if (errors) {
        return;
      }
      console.log(values)
    })
  }
  render() {
    const { form: { getFieldDecorator } } = this.props
    const nameDecorator = getFieldDecorator('name')
    const sexDecorator = getFieldDecorator('sex')
    return (
      
{nameDecorator()} {sexDecorator()}
); } } export default Form.create()(Test)

本文标题:Android实现AntDesign自定义表单组件-创新互联
网页链接:http://kswsj.cn/article/deesgg.html

其他资讯