Android实现Ant Design 自定义表单组件

ant design 组件提供了input，inputnumber，radio，select，uplod等表单组件，但实际开发中这是不能满足需求，同时我们希望可以继续使用form提供的验证和提示等方法（使用起来确实很爽），这时需要自己动手封装一些表单，同时我们还要保持方法可以继续是使用。

　　组件的源码   

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

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 (
      <section>
        <form layout="horizontal" onsubmit={this.handlesubmit}>
          <formitem label="姓名">
            {namedecorator(<input />)}
          </formitem>
          <formitem label="年龄">
            {sexdecorator(<radiogroup options={options} />)}
          </formitem>
          <formitem buttonscontainer>
            <button type="primary" size="default" htmltype="submit">提交</button>
          </formitem>
        </form>
      </section>
    );
  }
}
export default form.create()(test)

　现在需求需要我们实现多个姓名的提交，这时使用ui组件提供的表单便无法实现。

　　下面我们可以封装一个inputarrary组件:

import react, { purecomponent } from 'react'
import proptypes from 'prop-types'
import { button, icon, input } from 'antd'
import './index.scss'
class inputarray extends purecomponent {
  constructor(props) {
    super(props)
  }
  handlechange = index => {
    const { value, onchange } = this.props
    const newvalue = [...value]
    newvalue[index] = target.value
    onchange(newvalue)
  }
  handledelete = e => {
    const target = e.currenttarget
    const index = target.parentnode.parentnode.firstchild.dataset.index
    const { value, onchange } = this.props
    const newvalue = [...value]
    newvalue.splice(number(index), 1)
    onchange(newvalue)
  }
  handleadd = () => {
    const { value, onchange } = this.props
    const newvalue = [...value, '']
    onchange(newvalue)
  }
  render() {
    const { value, ...others } = this.props
    const closebtn = <icon type="close-circle" onclick={this.handledelete} />
    return (
      <div classname="input-array-component">
        {value.map((v, i) => {
          return (
            <div key={i}>
              <input
                {...others}
                value={v}
                suffix={closebtn}
                data-index={i}
                onchange={() => this.handlechange(i)}
              />
            </div>
          );
        })}
        <div>
          <button type="dashed" icon="plus" onclick={this.handleadd}>添加</button>
        </div>
      </div>
    );
  }
}
inputarray.defaultprops = {
  value: []
}
export default inputarray

 　　　　这是我们就可以像引入input组件一样引入inputarray组件实现了一组姓名的提交。

<formitem label="姓名">
    {namedecorator(<inputarray />)}
</formitem

　　组件主要使用的form提供getfielddecorator方法，这个方法会向组件注入value参数，onchange方法，每次调用onchange方法都会去改变value，从而刷新整个组件。为什么会这样那，其实ant design 会在表单组件外层包裹一层组件，维护一个state值，每次onchange都是在改变外部state值，调用setstate来刷新表单组件。

　　　　upload组件使用中也遇到一个坑，upload组件action上传地址参数也是必填参数，每次上传都会直接上传到服务器，不能和其它表单的数据一起提交，这时候我们也必须从新封装一个上传组件，同时因为存在文件或图片数据就不能使用json格式和后台进行交互，必须使用new formdata()的数据格式上传，也就是原生的表单的submit提交。 

　　组件的源码   

以上所述是小编给大家介绍的android实现ant design 自定义表单组件，希望对大家有所帮助