【React】Ant Design穿梭框Target栏的显示以及禁用问题

Ant Design 穿梭框官方文档：https://ant.design/components/transfer-cn/

在使用的过程中我遇到了两个小问题，其实知道原因和解决方法之后真的觉得是特别特别简单的问题。

1.穿梭框右侧Target栏不显示的问题。

• 问题具体描述：对 targetKeys（显示在右侧框数据的key集合）进行初始化后，右侧框内数据不显示。
• 原因：初始化后的 targetKeys 数组在左侧没有源数据。

也就是说假设左边的 dataSource （数据源数组）为：

[
	{Title:’A’,key:’1’},
	{Title:’B’,key:’2’},
	{Title:’C’,key:’3’}
]

右边的 targetKeys 数组为

[5,6,7]

targetKeys[]中的key值在dataSource []中没有对应的数据源，所以无法显示。

• 解决办法：在 dataSource [] 中确保要有targetKeys[] 的数据源。

2.target栏部分禁用问题。
效果如图：

其实很简单只需要在dataSource [] 数组中将对应数据"disabled"属性修改为true，如：

//dataSource []
[
	{Title:’A’,key:’1’,disabled:true},
	{Title:’B’,key:’2’,disabled:false},
	{Title:’C’,key:’3’,disabled:true}
]

//targetKeys[]
[1,2]  
//结果：target一栏中显示"A" "B",A为不可修改，B为可修改