reacthook+antd modal模态框里放一个form表单和一个table表格,没有搜索按钮只有重置按钮,当输入一个查询条件后会立即执行数据查询。table表格有选择功能。实现模态框搜索数据的时候列表刷新并且模态框不会关闭,使用usememo应该可以解决这个问题。可以帮我写个小demo。
时间: 2024-03-05 10:48:55 浏览: 119
当然可以!下面是一个简单的例子,展示了如何在模态框中使用 `useMemo` 来优化性能并实现搜索和重置功能:
```jsx
import React, { useState, useMemo } from 'react';
import { Modal, Form, Input, Button, Table } from 'antd';
const data = [
{ key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
{ key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
{ key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
];
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
];
const MyModal = ({ visible, onCancel }) => {
const [form] = Form.useForm();
const [searchText, setSearchText] = useState('');
const handleSearch = () => {
setSearchText(form.getFieldValue('search'));
};
const handleReset = () => {
form.resetFields();
setSearchText('');
};
const filteredData = useMemo(() => {
if (!searchText) {
return data;
}
return data.filter((item) => {
return Object.values(item).some((value) => {
return value.toString().includes(searchText);
});
});
}, [searchText]);
return (
<Modal visible={visible} onCancel={onCancel} footer={null}>
<Form form={form} layout="inline">
<Form.Item name="search">
<Input placeholder="Input search text" />
</Form.Item>
<Form.Item>
<Button type="primary" onClick={handleSearch}>
Search
</Button>
</Form.Item>
<Form.Item>
<Button onClick={handleReset}>Reset</Button>
</Form.Item>
</Form>
<Table
columns={columns}
dataSource={filteredData}
rowSelection={{
type: 'checkbox',
}}
/>
</Modal>
);
};
export default MyModal;
```
在这个例子中,我们使用了 `useState` 来保存输入框中的搜索文本,并且使用 `useMemo` 来根据搜索文本筛选出符合条件的数据。当用户点击搜索按钮时,我们会更新搜索文本的状态,这会导致 `useMemo` 重新计算过滤后的数据。当用户点击重置按钮时,我们会重置表单和搜索文本的状态。这个例子中的 `Table` 组件还支持选择功能,但这不是本例的重点。
希望这个例子能帮助到你!
阅读全文