Maison > Article > interface Web > 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!