前言:
经验之谈-官方文档一定要看仔细!
问题:
在Modal对话框里加入带搜索的Transfer穿梭框,如果批量操作的是选中状态,关闭对话框再重新打开,状态没有刷新,如下图
解决思路:
1.首先去ant design官网找相关api,发现了如下图几个api是可以控制选中状态的,分别是selectedKeys,onSelectChange
2.把sourceSelectedKeys,targetSelectedKeys放在state里,初始化为空数组,调用onSelectChange的时候赋值更新,关闭对话框的时候再将这两个置为空数组。然后在Transfer里面新加selectedKeys这个属性,值为
[...sourceSelectedKeys,...targetSelectedKeys]
实现:
1.我是写了两个组件,在一个名为Transfer的组件里写一个按钮用来控制对话框的显示隐藏,以及穿梭框的onChange和onSelectChange事件,并将该组件作为父组件,引入另一个组件TransferModal,之所以将那些change事件写在父组件,是因为需要改变的值都存在了父组件的state中,方便修改。
2.主要代码如下:
state的内容
this.state = {
modalVisible: false, // 对话框的显示状态
mockData: [
{
key: '12',
title: '小英雄',
chosen: true,
},
{
key: '14',
title: '小排球',
chosen: true,
},
{
key: '13',
title: '闪耀暖暖',
chosen: false,
},
{
key: '16',
title: '偶像梦幻祭',
chosen: false,
},
], // 穿梭框的所有信息
targetKeys: ['12', '14'], // 已选中的节点id
sourceSelectedKeys: [], // 可选框的id
targetSelectedKeys: [], // 已选框的id
}
点击穿梭框中的批量操作框
onSelectChange = (s, t) => {
this.setState({
sourceSelectedKeys: s,
targetSelectedKeys: t,
})
}
关闭对话框:
closeModal = () => {
this.setState({
modalVisible: false,
sourceSelectedKeys: [],
targetSelectedKeys: [],
})
}
穿梭框内的属性api:
<Transfer
dataSource={mockData}
showSearch
filterOption={this.filterOption}
targetKeys={targetKeys}
onChange={handleChange}
onSearch={this.handleSearch}
selectedKeys={[...sourceSelectedKeys, ...targetSelectedKeys]}
onSelectChange={onSelectChange}
render={item => item.title}
/>