Ausführliche Erläuterung von Beispielen für die Implementierung benutzerdefinierter Ant Design-Formularkomponenten

Die Ant Design-Komponente stellt Formularkomponenten wie Input, InputNumber, Radio, Select, uplod bereit usw., aber in der tatsächlichen Entwicklung kann dies die Anforderungen nicht erfüllen. Gleichzeitig hoffen wir, die von Form bereitgestellten Überprüfungs- und Eingabeaufforderungsmethoden weiterhin verwenden zu können (zu diesem Zeitpunkt müssen wir sie kapseln). Einige Formen selbst, und gleichzeitig müssen wir die Methode beibehalten, die weiterhin verwendet werden kann.

Der Quellcode der Komponente

Schauen wir uns an, wie Sie die Formularkomponente selbst kapseln können:

 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)

Jetzt Die Anforderungen verlangen von uns die Implementierung mehrerer Namen. Die Übermittlung von Namen kann mit dem von der UI-Komponente bereitgestellten Formular nicht erreicht werden.

Als nächstes können wir eine InputArrary-Komponente kapseln:

 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

Auf diese Weise können wir die InputArray-Komponente genau wie die Input-Komponente einführen, um die Übermittlung einer Reihe von Namen zu implementieren.

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

Das von der Komponente hauptsächlich verwendete Formular stellt die Methode getFieldDecorator bereit. Diese Methode fügt den Parameter value und die Methode onChange ein In die Komponente wird bei jedem Aufruf der onChange-Methode der Wert geändert und dadurch die gesamte Komponente aktualisiert. Warum ist das so? Tatsächlich umhüllt Ant Design eine Komponentenebene außerhalb der Formularkomponente und behält einen Statuswert bei. Jeder onChange ändert den externen Statuswert und ruft setState auf, um die Formularkomponente zu aktualisieren.

Bei der Verwendung der Upload-Komponente ist auch ein Fehler aufgetreten. Der Upload-Adressparameter der Upload-Komponentenaktion ist ebenfalls ein erforderlicher Parameter. Jeder Upload wird direkt auf den Server hochgeladen und kann nicht zusammen mit den Daten übermittelt werden Zu diesem Zeitpunkt müssen wir auch eine Upload-Komponente neu kapseln. Da Dateien oder Bilddaten vorhanden sind, können Sie nicht das JSON-Format verwenden, um mit dem Hintergrund zu interagieren FormData() zum Hochladen, bei dem es sich um die Übermittlung des nativen Formulars handelt.

Quellcode der Komponente

Wenn es Ihnen geholfen hat, klicken Sie bitte auf Start, um es zu unterstützen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Implementierung benutzerdefinierter Ant Design-Formularkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!