快捷導(dǎo)航

Android實現(xiàn)Ant Design 自定義表單組件

更新時間：2017年06月21日 08:36:44 作者：憐白

Ant Design 組件提供了Input，InputNumber，Radio，Select，uplod等表單組件,下面通過本文給大家詳細介紹Android實現(xiàn)Ant Design 自定義表單組件，需要的的朋友參考下吧

Ant Design 組件提供了Input，InputNumber，Radio，Select，uplod等表單組件，但實際開發(fā)中這是不能滿足需求，同時我們希望可以繼續(xù)使用Form提供的驗證和提示等方法（使用起來確實很爽），這時需要自己動手封裝一些表單，同時我們還要保持方法可以繼續(xù)是使用。

　　組件的源碼 https://github.com/haozhaohang/ant-design-expand-component

　　下面看一下如何自己封裝表單組件，這是一個最基礎(chǔ)的表單使用例子:

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)

　現(xiàn)在需求需要我們實現(xiàn)多個姓名的提交，這時使用UI組件提供的表單便無法實現(xiàn)。

　　下面我們可以封裝一個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組件實現(xiàn)了一組姓名的提交。

<FormItem label="姓名">
    {nameDecorator(<InputArray />)}
</FormItem

　　組件主要使用的form提供getFieldDecorator方法，這個方法會向組件注入value參數(shù)，onChange方法，每次調(diào)用onChange方法都會去改變value，從而刷新整個組件。為什么會這樣那，其實Ant Design 會在表單組件外層包裹一層組件，維護一個State值，每次onChange都是在改變外部state值，調(diào)用setState來刷新表單組件。

　　　　Upload組件使用中也遇到一個坑，Upload組件action上傳地址參數(shù)也是必填參數(shù)，每次上傳都會直接上傳到服務(wù)器，不能和其它表單的數(shù)據(jù)一起提交，這時候我們也必須從新封裝一個上傳組件，同時因為存在文件或圖片數(shù)據(jù)就不能使用json格式和后臺進行交互，必須使用new FormData()的數(shù)據(jù)格式上傳，也就是原生的表單的submit提交。

　　組件的源碼 https://github.com/haozhaohang/ant-design-expand-component

以上所述是小編給大家介紹的Android實現(xiàn)Ant Design 自定義表單組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: