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;