当您在
模态框中
使用搜索框时，每次更改搜索项时，会导致整个
模态框重新渲染。这是因为每次更改搜索项时，该组件的状态都会被更新，从而导致重新渲染。为了避免这种情况，您可以
使用 useMemo 钩子来记忆搜索结果。这样，只有在搜索数据发生更改时，
模态框才会重新渲染。
以下是一个
使用 useMemo 的示例代码，包括一个带
搜索框的
模态框和一个表格：
```jsx
import React, { useState, useMemo } from 'react';
import {
Modal, Input, Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 3
2,
address: 'New York No. 1 Lake Park',
},
{
key: '
2',
name: 'Jim Green',
age: 4
2,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 3
2,
address: 'Sidney No. 1 Lake Park',
},
];
const Search
Modal = ({ visible, onCancel }) => {
const [searchText, setSearchText] = useState('');
const [searchColumn, setSearchColumn] = useState('name');
//
使用 useMemo 记忆搜索结果
const searchResult = useMemo(() => {
return data.filter(item =>
item[searchColumn].toLowerCase().includes(searchText.toLowerCase())
);
}, [searchColumn, searchText]);
const handleSearchTextChange = e => {
setSearchText(e.target.value);
};
const handleSearchColumnChange = value => {
setSearchColumn(value);
};
return (
<
Modal visible={visible} onCancel={onCancel}>
<Input.Search
placeholder="Search"
value={searchText}
onChange={handleSearchTextChange}
style={{ width:
200, marginRight: '16px' }}
/>
<
select value={searchColumn} onChange={e => handleSearchColumnChange(e.target.value)}>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="address">Address</option>
</
select>
<Table columns={columns} dataSource={searchResult} />
</
Modal>
);
};
export default Search
Modal;
```
在这个例子中，我们
使用了两个 useState 钩子来管理搜索文本和搜索列的状态。我们还
使用了 useMemo 钩子来记忆搜索结果。每当搜索文本或搜索列更改时，搜索结果将被重新计算。
现在，您可以在包含 Search
Modal 的父组件中
使用它：
```jsx
import React, { useState } from 'react';
import Search
Modal from './Search
Modal';
const ParentComponent = () => {
const [visible, setVisible] = useState(false);
const handleShow
Modal = () => {
setVisible(true);
};
const handleCancel
Modal = () => {
setVisible(false);
};
return (
<>
<button onClick={handleShow
Modal}>Show
Modal</button>
<Search
Modal visible={visible} onCancel={handleCancel
Modal} />
</>
);
};
export default ParentComponent;
```
这样，每当您在
模态框中更改搜索文本或搜索列时，只有表格内容会被重新渲染，而
模态框本身不会被重新渲染或关闭。
本文介绍了一种解决模态对话框强制聚焦的问题，通过重写enforceFocus函数，使得select2搜索框能够正常获得焦点。
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
