实现AntDesign自定义表单组件实例详解

 1 import React, { PureComponent } from 'react' 
 2 import { Button, Form, Input, Radio } from 'antd' 
 3 import FormItem from 'components/FormItem' 
 4 
 5 const RadioGroup = Radio.Group 
 6 const options = [ 
 7 { label: '男', value: 1 }, 
 8 { label: '女', value: 2 }, 
 9 ]
 10 
 11 class Test extends PureComponent {
 12 handleSubmit = (e) => {
 13 e.preventDefault();
 14 
 15 const { form: { validateFields } } = this.props;
 16 
 17 validateFields((errors, values) => {
 18 if (errors) {
 19 return;
 20 }
 21 console.log(values)
 22 })
 23 }
 24 
 25 render() {
 26 const { form: { getFieldDecorator } } = this.props
 27 
 28 const nameDecorator = getFieldDecorator('name')
 29 const sexDecorator = getFieldDecorator('sex')
 30 
 31 return (
 32 <section>
 33 <Form layout="horizontal" onSubmit={this.handleSubmit}>
 34 <FormItem label="姓名">
 35 {nameDecorator(<Input />)}
 36 </FormItem>
 37 
 38 <FormItem label="年龄">
 39 {sexDecorator(<RadioGroup options={options} />)}
 40 </FormItem>
 41 
 42 <FormItem buttonsContainer>
 43 <Button type="primary" size="default" htmlType="submit">提交</Button>
 44 </FormItem>
 45 </Form>
 46 </section>
 47 );
 48 }
 49 }
 50 
 51 export default Form.create()(Test)

 1 import React, { PureComponent } from 'react' 
 2 import PropTypes from 'prop-types' 
 3 import { Button, Icon, Input } from 'antd' 
 4 
 5 import './index.scss' 
 6 
 7 class InputArray extends PureComponent { 
 8 constructor(props) { 
 9 super(props)
 10 }
 11 
 12 handleChange = index => {
 13 const { value, onChange } = this.props
 14 const newValue = [...value]
 15 
 16 newValue[index] = target.value
 17 
 18 onChange(newValue)
 19 }
 20 
 21 handleDelete = e => {
 22 const target = e.currentTarget
 23 const index = target.parentNode.parentNode.firstChild.dataset.index
 24 const { value, onChange } = this.props
 25 const newValue = [...value]
 26 
 27 newValue.splice(Number(index), 1)
 28 
 29 onChange(newValue)
 30 }
 31 
 32 handleAdd = () => {
 33 const { value, onChange } = this.props
 34 const newValue = [...value, '']
 35 
 36 onChange(newValue)
 37 }
 38 
 39 render() {
 40 const { value, ...others } = this.props
 41 
 42 const closeBtn = <Icon type="close-circle" onClick={this.handleDelete} />
 43 
 44 return (
 45 <p className="input-array-component">
 46 {value.map((v, i) => {
 47 return (
 48 <p key={i}>
 49 <Input
 50 {...others}
 51 value={v}
 52 suffix={closeBtn}
 53 data-index={i}
 54 onChange={() => this.handleChange(i)}
 55 />
 56 </p>
 57 );
 58 })}
 59 <p>
 60 <Button type="dashed" icon="plus" onClick={this.handleAdd}>添加</Button>
 61 </p>
 62 </p>
 63 );
 64 }
 65 }
 66 
 67 InputArray.defaultProps = {
 68 value: []
 69 }
 70 
 71 export default InputArray

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