reactjs - 如何使用 react state 将多个表单数据存储到 antd 表中？

Question

我想将所有 antd 模态表单数据存储到反应状态。然后，我想在提交之前将所有状态数据存储到 antd 表中。我还想在提交之前删除和更新表数据。

 import React, { useState } from 'react';
    import { Form, Input, InputNumber, Modal, Button, Table, Popconfirm } from 'antd';
    
    import { connect } from 'umi';
    const layout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const tailLayout = {
      wrapperCol: {
        offset: 8,
        span: 16,
      },
    };
    
    const Demo = () => {
      const [visible, setVisible] = useState(false);
      const [state, setState] = useState<any>([]);
      const [formmodal] = Form.useForm();
    
      const onModalFinish = (values: any) => {
        setState(values);
        formmodal.resetFields();
        setVisible(false);
      };
      const handleDelete = (key: any) => {};
      const showUserModal = () => {
        setVisible(true);
      };
    
      const onCancel = () => {
        setVisible(false);
      };
    
      const onFinish = (values: any) => {
        console.log('Finish:', values);
      };
      const columns: any = [
        {
          title: 'सि नं ',
          width: 25,
          dataIndex: 'name',
          key: 'SN',
        },
    
        {
          title: 'सिफारिस लिनेको नाम',
          // width: 25,
          dataIndex: 'age',
          key: 'name',
        },
        {
          title: 'operation',
          dataIndex: 'operation',
          render: (_: any, record: { key: React.Key }) => (
            <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)}>
              <a>Delete</a>
            </Popconfirm>
          ),
        },
      ];
    
      return (
        <>
          <Form {...layout} name="basicForm" onFinish={onFinish}>
            <Form.Item
              name="group"
              label="Group Name"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input />
            </Form.Item>
    
            <Form.Item label="User List">
              {/* <Table columns={columns} bordered dataSource={state} /> */}
              {JSON.stringify(state)}
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button htmlType="submit" type="primary">
                Submit
              </Button>
              <Button
                htmlType="button"
                style={{
                  margin: '0 8px',
                }}
                onClick={showUserModal}
              >
                Add User
              </Button>
            </Form.Item>
          </Form>
    
          <Modal title="Basic Drawer" visible={visible} footer={null} onCancel={onCancel}>
            <Form form={formmodal} layout="vertical" name="userForm" onFinish={onModalFinish}>
              <Form.Item
                name="name"
                label="User Name"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                name="age"
                label="User Age"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <InputNumber />
              </Form.Item>
              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
              </Form.Item>
            </Form>
          </Modal>
        </>
      );
    };
    
    export default connect(({ loading }: { loading: { effects: Record<string, boolean> } }) => ({
      submitting: loading.effects['formAndadvancedForm/submitAdvancedForm'],
    }))(Demo);

标签： reactjsantd