【antd】动态增加表单项

Esai-Z / 2023-09-04 / 原文

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form:', values);
  };
  const [formItems, setformItems] = useState([]);
  const addFormItem = () => {
    const newItem = {
      // 这里定义新表单项的初始值
      // 可以根据实际需求进行修改
      name: '',
      age: undefined,
      address: '',
    };
    setformItems([...formItems, newItem]);
  };

  const removeFormItem = (key) => {
    const abc=formItems.filter((item,index)=>index!==key)
    console.log(key, formItems,abc);

    // const abc = formItems.splice(index, 1);
    setformItems([...abc]);
  };
  return (
    <Form>
      {formItems.map((item, index) => (
        <div key={index}>
          <Form.Item label="姓名">
            <Input value={item.name} />
          </Form.Item>
          <Form.Item label="年龄">
            <Input />
          </Form.Item>
          <Form.Item label="地址">
            <Input value={item.address} />
          </Form.Item>
          <Button onClick={() => removeFormItem(index)}>删除</Button>
        </div>
      ))}
      <Button onClick={addFormItem}>增加表单项</Button>
    </Form>
  );
};
export default App;