react+antdシリーズのFormフォーム(1):追加と削除

antdを使う時、フォームを追加して削除するなら、どうすればいいですか?

import { connect } from 'dva';
import { Form, Input, Button } from 'antd';
import styles from './eg1.css';

const FormItem = Form.Item;

function Page(props) {
  const { form } = props;
  const { getFieldDecorator, getFieldValue } = form

  //     
  const handleSubmit = (e) => {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
      }
    });

  }

  //   
  const add = () => {
    const list = form.getFieldValue('list');
    const nextList = list.concat({});
    form.setFieldsValue({
      list: nextList,
    });


  }

  //   
  const deleteRow = (index) => {
    const list = form.getFieldValue('list');
    const content = form.getFieldValue('content');

    if (list.length === 1) {
      return;
    }

    form.setFieldsValue({
      list: list.filter((item, key) => key !== index),
      content: content.filter((item, key) => key !== index),
    });



  }

  getFieldDecorator('list', { initialValue: [{}] });
  const list = getFieldValue('list');

  const listContent = list.map((item, index) => {
    return (
      
      {getFieldDecorator(`content[${index}].name`, {
         rules: [{
         required: true,
         message: "      ！",
         }],
      })(
         
      )}

       {index > 0 ? (
             
       ) : null}


      
    );
  });


  return (
    

        


        {listContent}
        
            
            
        
      

    
  );
}


const page = Form.create()(Page);
export default connect()(page);

ここではフォームを追加したり削除したりするだけでなく、フォームを検証したり、入力があるかどうかを確認したりします.以上は自分でデータがない場合です.データがある場合は以下の通りです.

import React from 'react';
import { connect } from 'dva';
import { Form, Input, Button } from 'antd';
import styles from './eg2.css';

const FormItem = Form.Item;

function Page(props) {
  const { form } = props;
  const { getFieldDecorator, getFieldValue } = form

  //     
  const handleSubmit = (e) => {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
      }
    });

  }

  //   
  const add = () => {
    const list = form.getFieldValue('list');
    const nextList = list.concat({});
    form.setFieldsValue({
      list: nextList,
    });


  }

  //   
  const deleteRow = (index) => {
    const list = form.getFieldValue('list');
    const content = form.getFieldValue('content');

    if (list.length === 1) {
      return;
    }

    form.setFieldsValue({
      list: list.filter((item, key) => key !== index),
      content: content.filter((item, key) => key !== index),
    });



  }


  const slist = [{
    id:'0001',
    name: '  '
  }, {
    id:'0002',
    name: '  '
  }]
  getFieldDecorator('list', { initialValue: slist });
  const list = getFieldValue('list');

  const listContent = list.map((item, index) => {
    getFieldDecorator(`content[${index}].id`, {initialValue: item.id || ''})
    return (
      
      {getFieldDecorator(`content[${index}].name`, {
         rules: [{
         required: true,
         message: "      ！",
         }],
         initialValue: item.name || ''
      })(
         
      )}

       {index > 0 ? (
             
       ) : null}


      
    );
  });


  return (
    

        


        {listContent}
        
            
            
        
      

    
  );
}


const page = Form.create()(Page);
export default connect()(page);

データがあれば、行ごとにIDがありますが、このIDは表示されません.私たちはget FieldDecoratorを使ってidに声明します.そうすると、フォームを提出する時に、IDのデータをフォームに取り込むことができます.データがあるかないかという違いは、フォームgetFieldDecoratorがある時に初期値を与える必要があります.他の両方とも同じです.
具体的なコードは住所をダウンロードします.https://gitee.com/hope93/antd...