Ant Design 사용자 정의 양식 구성 요소 구현 예에 대한 자세한 설명

　Ant Design 구성 요소는 Input, InputNumber, Radio, Select, uplod 및 기타 양식 구성 요소를 제공하지만 실제 개발에서는 이러한 요구 사항을 충족할 수 없습니다. Form.tips 및 기타 방법(정말 재미있습니다)에서 제공하는 유효성 검사 및 확인을 통해 현재 일부 양식을 직접 캡슐화해야 하며 동시에 해당 방법을 계속 사용할 수 있도록 유지해야 합니다.

　 구성 요소 소스 코드

양식 구성 요소를 직접 캡슐화하는 방법을 살펴보겠습니다. 이것은 가장 기본적인 양식 사용 예입니다.

 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)

이제 요구 사항에 따라 여러 이름을 제출해야 합니다. UI 구성요소에서 제공하는 양식은 수행할 수 없습니다.

　이제 우리는 InputArrary 구성 요소를 캡슐화할 수 있습니다:

 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

　이것은 이름 집합 제출을 구현하기 위해 입력 구성 요소와 마찬가지로 InputArray 구성 요소를 도입할 수 있는 방법입니다.

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

　컴포넌트에서 주로 사용하는 폼은 value 매개변수를 컴포넌트에 주입하는 getFieldDecorator 메소드와 onChange 메소드가 호출될 때마다 값이 변경되는 onChange 메소드를 제공합니다. 이를 통해 전체 구성 요소를 새로 고칩니다. 실제로 Ant Design은 양식 구성 요소 외부의 구성 요소 레이어를 래핑하고 상태 값을 유지합니다. 각 onChange는 외부 상태 값을 변경하고 setState를 호출하여 양식 구성 요소를 새로 고칩니다.

　 업로드 구성 요소 작업의 업로드 주소 매개 변수도 필수 매개 변수이므로 각 업로드는 서버에 직접 업로드되며 다른 양식의 데이터와 함께 제출할 수 없습니다. 이번에는 업로드 컴포넌트도 다시 캡슐화해야 하며, 파일이나 이미지 데이터가 있기 때문에 json 형식을 사용하여 업로드할 수 없습니다. 기본 양식을 제출합니다.

　구성 요소의 소스 코드

　도움이 되었다면 시작을 클릭하여 지원하세요

위 내용은 Ant Design 사용자 정의 양식 구성 요소 구현 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!