Detailed explanation of examples of implementing Ant Design custom form components

Ant Design component provides Input, InputNumber, Radio, Select, uplod and other form components , but in actual development, this cannot meet the needs. At the same time, we hope to continue to use the verification and prompt methods provided by Form (it is really fun to use). At this time, we need to encapsulate some forms ourselves, and at the same time, we must keep the method can continue is to use.

The source code of the component

Let’s take a look at how to encapsulate the form component yourself. This is the most basic form usage example:

 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)

Now the requirement requires us to implement multiple names Submit, then using the form provided by the UI component cannot be achieved.

Next we can encapsulate an InputArrary component:

 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

This way we can introduce the InputArray component just like the Input component to implement the submission of a set of names.

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

The form mainly used by the component provides the getFieldDecorator method. This method will inject the value parameter into the component. The onChange method calls onChange every time. All methods will change the value, thereby refreshing the entire component. Why is this? In fact, Ant Design will wrap a layer of components outside the form component and maintain a State value. Each onChange changes the external state value and calls setState to refresh the form component.

I also encountered a pitfall when using the Upload component. The upload address parameter of the Upload component action is also a required parameter. Each upload will be uploaded directly to the server and cannot be submitted together with the data of other forms. At this time, we must also Re-encapsulate an upload component. At the same time, because there are files or image data, you cannot use the json format to interact with the background. You must use the data format of new FormData() to upload, which is the submit submission of the native form.

Component source code

If it has provided you with some help, please click start to support it

The above is the detailed content of Detailed explanation of examples of implementing Ant Design custom form components. For more information, please follow other related articles on the PHP Chinese website!