回显表格

import React, { useState, useEffect } from 'react';
import { Modal, Button, Table, Form, message } from 'antd';

const BoxSelectionComponent: React.FC<{ onChange?: (updatedSelection: string[]) => void }> = ({ onChange }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [selectedBoxes, setSelectedBoxes] = useState<string[]>([]);
  const [savedItems, setSavedItems] = useState<string[]>([]);
  const [form] = Form.useForm(); // 使用 useForm 钩子

  const boxes = ['A', 'B', 'C', 'D', 'E'];

  useEffect(() => {
    form.setFieldsValue({ selectedItem: savedItems }); // 更新表单字段值
    console.log('Data from form:', savedItems);
  }, [form, savedItems]);

  const showModal = () => {
    setModalVisible(true);
  };

  const handleBoxSelect = (box: string) => {
    const updatedSelection = [...selectedBoxes];

    if (updatedSelection.includes(box)) {
      // 已选中，从选择中移除
      updatedSelection.splice(updatedSelection.indexOf(box), 1);
    } else {
      // 未选中，添加到选择中
      if (updatedSelection.length < 3) {
        updatedSelection.push(box);
      } else {
        message.warning('最多可以选中三个盒子');
        return;
      }
    }

    setSelectedBoxes(updatedSelection);

    if (onChange) {
      // 在这里使用最新的 selectedBoxes
      onChange(updatedSelection);
    }
  };



  const handleOk = () => {
    setSavedItems(selectedBoxes); // 保存选中的项到状态
    setModalVisible(false);
  };

  const handleCancel = () => {
    setModalVisible(false);
  };

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (_: any, record: { index: number }) => record.index + 1,
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
  ];

  const data = savedItems.map((box, index) => ({
    key: index,
    index,
    name: box,
  }));

  return (
    <>
      <Button type="primary" onClick={showModal}>
        打开Modal
      </Button>
      <Modal title="选择盒子" visible={modalVisible} onOk={handleOk} onCancel={handleCancel}>
        <div>
          {boxes.map((box) => (
            <div
              key={box}
              style={{
                border: '1px solid #ccc',
                padding: '10px',
                marginBottom: '10px',
                backgroundColor: selectedBoxes.includes(box) ? '#e6f7ff' : 'white',
                cursor: 'pointer',
              }}
              onClick={() => handleBoxSelect(box)}
            >
              {box}
            </div>
          ))}
        </div>
      </Modal>
      <Table columns={columns} dataSource={data} pagination={false} />
    </>
  );
};

export default BoxSelectionComponent;

import React, { useEffect } from 'react';
import { Form, Button, message } from 'antd';
import BoxSelectionComponent from './BoxSelectionComponent';

const App: React.FC = () => {
  const [form] = Form.useForm();

  const handleFormSubmit = () => {
    form.validateFields().then((values: { selectedItem: any; }) => {
      // 表单校验通过，执行保存到后端的逻辑
      const { selectedItem } = values;
      console.log('保存到后端的项:', selectedItem);

      // 模拟保存到后端的请求
      fetch('http://localhost:3001/saveSelectedItems', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ items: selectedItem }),
      })
        .then((response) => response.json())
        .then((data) => {
          // 处理后端的响应
          console.log('后端响应:', data);
        })
        .catch((error) => {
          console.error('保存项到后端时发生错误:', error);
        });
    }).catch((error: any) => {
      // 表单校验失败
      message.error('表单校验失败，请检查输入');
    });
  };

  useEffect(() => {
    fetch('http://localhost:3001/getSelectedItems')
      .then((response) => response.json())
      .then((data) => {
        // 更新表单字段值
        form.setFieldsValue({ selectedItem: data.item || [] });
      })
      .catch((error) => {
        console.error('获取保存的项时发生错误:', error);
      });
  }, [form]);

  return (
    <>
      <Form form={form}>
        <Form.Item
          label="选中的盒子"
          name="selectedItem"
          rules={[{ required: true, message: '至少选择一个盒子' }]}
        >
          <BoxSelectionComponent onChange={(updatedSelection) => form.setFieldsValue({ selectedItem: updatedSelection || [] })} />
        </Form.Item>
        <Button type="primary" onClick={handleFormSubmit}>
          保存到后端
        </Button>
      </Form>
    </>
  );
};

export default App;