React Hooks + TypeScript + Ant Design -------------表單動态增減實作

官方位址：https://ant.design/components/form-cn/#components-form-demo-dynamic-form-item

基礎Demo

import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const Demo = () => {
  const onFinish = values => {
    console.log('Received values of form:', values);
  };

  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, fieldKey, ...restField }) => (
              <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                <Form.Item
                  {...restField}
                  name={[name, 'first']}
                  fieldKey={[fieldKey, 'first']}
                  rules={[{ required: true, message: 'Missing first name' }]}
                >
                  <Input placeholder="First Name" />
                </Form.Item>
                <Form.Item
                  {...restField}
                  name={[name, 'last']}
                  fieldKey={[fieldKey, 'last']}
                  rules={[{ required: true, message: 'Missing last name' }]}
                >
                  <Input placeholder="Last Name" />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(name)} />
              </Space>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add field
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, mountNode);
           

值

得到值的格式見上圖，再組裝為需求的格式

用法

常用函數

• add : 新增一項

  add(參數一，參數二)

  參數一：defaultValue ，即預設值

  參數二: insertIndex，新增的坐标。0為最上面，不填即為按順序向下增加

  -move: 移動某一項

  move(參數一，參數二)

  參數一：from ，即把誰移動，填寫坐标

  參數二: to，移動到哪裡，填寫坐标

• remove: 删除某一項或某幾項

  remove(參數一)

  參數一：index ，即把誰删除，填寫坐标或坐标集合