问题：
如何在关闭弹窗时清除掉table的filter条件？
部分代码：
constructor() {
super();
this.state = {
visible: false,
selectedRowKeys: ,
selectRow: ,
searchText: ‘’,
}
}
componentDidMount() {
}
handleOk = () => {
const { planSceneCheck, actions, planId } = this.props;
let planSceneList = planSceneCheck;
for (const item of this.state.selectRow) {
planSceneList.push(item);
}
this.handleCancel();
actions.updateTestPlanDetail({ planId, planCaseType: 2, planCaseDetail: planSceneList }).then(result => {
if (result.statusCode === 200) {
message.success(result.message);
actions.updateSceneCheck(planSceneList);
actions.getTestPlanDetail({ planId });
} else {
message.error(result.message);
}
})
}
handleCancel = () => {
this.setState({
visible: false,
selectedRowKeys: [],
selectRow: [],
searchText: ''
});
}
showModal = () => {
if (this.props.permission.roleId <= 1) {
this.setState({
visible: true
})
} else {
message.error('您并非团队成员, 无法添加新的场景')
}
}
handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
this.setState({
searchText: selectedKeys[0],
searchedColumn: dataIndex,
});
};
handleReset = clearFilters => {
clearFilters();
this.setState({ searchText: '' });
};
getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
ref={node => {
this.searchInput = node;
}}
placeholder={`搜索场景`}
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Button
type="primary"
onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
icon="search"
size="small"
style={{ width: 90, marginRight: 8 }}
>
搜索
</Button>
<Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
重置
</Button>
</div>
),
filterIcon: filtered => (
<Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => this.searchInput.select());
}
},
});
render() {
const { loading, sceneList, planSceneCheck } = this.props;
const { selectedRowKeys } = this.state;
const columns = [{
title: '场景',
dataIndex: 'sceneName',
key: 'sceneName',
...this.getColumnSearchProps('sceneName'),
}];
let pureScenes = [];
sceneList.map(item => {
if (isUndefined(item.children)) {
pureScenes.push(item)
} else {
item.children.map(item2 => {
pureScenes.push(item2);
})
}
})
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys, selectRow) => {
this.setState({
selectedRowKeys: selectedRowKeys,
selectRow
})
}
};
return (
<div>
<List
style={{ minHeight: '350px' }}
loading={loading}
bordered
itemLayout='horizontal'
footer={<div onClick={this.showModal} style={{ cursor: 'pointer', color: '#1890ff', display: 'flex', justifyContent: 'center', fontSize: '16px', alignItems: 'center' }}><Icon type='plus' />添加新的场景</div>}
dataSource={planSceneCheck}
renderItem={(item, index) => (
<List.Item actions={[<Popconfirm placement='topRight' title={'确定删除此场景吗'} onConfirm={() => this.confirm(index)} okText='是' cancelText='否'>
<Icon style={{ color: '#1890ff' }} type='delete' />
</Popconfirm>]}>
<List.Item.Meta
title={item.sceneName}
/>
</List.Item>
)}
/>
<Modal
title='添加场景'
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={pureScenes}
pagination={false}
>
</Table>
</Modal>
</div>
‘’’