Explication détaillée d'exemples d'implémentation de composants de formulaire personnalisé Ant Design

Le composant Ant Design fournit des composants de formulaire tels que Input, InputNumber, Radio, Select, uplod etc., mais dans le développement réel, cela ne peut pas répondre aux besoins. En même temps, nous espérons continuer à utiliser les méthodes de vérification et d'invite fournies par Form (c'est vraiment amusant à utiliser pour le moment). certaines formes nous-mêmes, et en même temps, nous devons garder la méthode que nous pouvons continuer à utiliser.

Code source du composant

Voyons comment encapsuler le composant de formulaire vous-même. Il s'agit de l'exemple d'utilisation de formulaire le plus basique :

 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)

Maintenant, les exigences exigent. nous ne pouvons pas mettre en œuvre plusieurs soumissions de noms en utilisant le formulaire fourni par le composant de l'interface utilisateur.

Ensuite, nous pouvons encapsuler un composant 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

De cette façon, nous pouvons introduire le composant InputArray tout comme le composant Input pour implémenter la soumission d'un ensemble de noms.

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

Le formulaire principalement utilisé par le composant fournit la méthode getFieldDecorator Cette méthode injectera le paramètre value et la méthode onChange. dans le composant, chaque fois que l'appel de la méthode onChange modifiera la valeur, actualisant ainsi l'ensemble du composant. Pourquoi ? En fait, Ant Design encapsulera une couche de composants en dehors du composant de formulaire et conservera une valeur d'état. Chaque onChange modifie la valeur de l'état externe et appelle setState pour actualiser le composant de formulaire.

Nous avons également rencontré un écueil lors de l'utilisation du composant Upload. Le paramètre d'adresse de téléchargement de l'action du composant Upload est également un paramètre obligatoire. Chaque téléchargement sera téléchargé directement sur le serveur et ne pourra pas être soumis avec les données de. d'autres formulaires. À ce stade, nous devons également ré-encapsuler un composant de téléchargement. En même temps, car il existe des fichiers ou des données d'image, vous ne pouvez pas utiliser le format json pour interagir avec l'arrière-plan. FormData() à télécharger, qui est la soumission du formulaire natif.

Code source du composant

S'il vous a fourni de l'aide, veuillez cliquer sur Démarrer pour le prendre en charge

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!