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

これは、Input コンポーネントと同じように、InputArray コンポーネントを導入して、名前のセットの送信を実装する方法です。

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

コンポーネントで主に使用されるフォームは、コンポーネントにvalueパラメータを注入するgetFieldDecoratorメソッドと、onChangeメソッドが呼び出されるたびに値が変更されるonChangeメソッドを提供します。これにより、コンポーネント全体がリフレッシュされます。これはなぜでしょうか? 実際、Ant Design はフォーム コンポーネントの外側のコンポーネントのレイヤーをラップし、State 値を維持します。各 onChange は外部の状態値を変更し、setState を呼び出してフォーム コンポーネントを更新します。

また、アップロード コンポーネントの使用時に落とし穴にも遭遇しました。アップロード コンポーネント アクションのアップロード アドレス パラメーターも必須パラメーターであり、各アップロードはサーバーに直接アップロードされるため、他のフォームのデータと一緒に送信することはできません。同時に、ファイルまたは画像データがあるため、新しい FormData() のデータ形式を使用する必要があります。これは、ネイティブ フォームの送信送信です。

コンポーネントのソースコード

少しでも役に立った場合は、[開始]をクリックしてサポートしてください

以上がAnt Designカスタムフォームコンポーネントの実装例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。