2021-06-04

在 antd 使用 Transfer穿梭框 组件，如何限制选择的数量

---

在 Transfer穿梭框 组件的API中，官方文档中关于禁用的只看到disabled 的属性，这个 disabled 会使整个 Transfer 组件禁用，不是单个选项禁用，不满足我的需求

然后继续翻看文档，我看到了 render 和 onSelectChange ，render是它的每行数据渲染函数，应该可以在里面控制它的 disabled,
而 onSelectChange 又满足同步用户选择的个数,

---

代码：

class TransferData extends Component {

	state = {
		initData: [],	//数据源
		targetKeys: [],	//已经确定到右边的 targetKeys

		sourceSelectedKeys: [],	//缓存左边勾选，但没确定到右边的 sourceSelectedKeys
	}
	
 	handleChange = values => {
   		this.setState({ targetKeys: values })
  	}

  	onSelectChange = sourceSelectedKeys => {
    	this.setState({ sourceSelectedKeys })
  	}

  	applyRecord = item => {
    	const { max_num } = this.props
    	if (max_num || max_num === 0) {
      		const { sourceSelectedKeys, targetKeys } = this.state
      		const list = targetKeys.concat(sourceSelectedKeys)
      		if (!list.some(i => i === item.key)) item.disabled = max_num <= list.length
      		/****
      		!list.some(i => i === item.key) 已经勾选的选不管确没确定，都不要禁用，不然会出现勾选到 max_num 个时，
      		会所有选项都被禁用，到时将无法使用
      		******/ 
    	}
    	return `${item.title}-${item.description}`
  }
  	
	render(){
	
	const { operations_right = '确定', operations_left = '取消' } = this.props
	
		return (
			<Transfer
        		dataSource={initData}
        		showSearch
        		listStyle={{
         		 width: 250,
          		height: 300,
        		}}
        		onSelectChange={sourceSelectedKeys => this.onSelectChange(sourceSelectedKeys)}
       			operations={[operations_right, operations_left]}
       		    targetKeys={targetKeys}
        		onChange={e => this.handleChange(e)}
        		render={record => this.applyRecord(record)}
      		/>
		)  
	}
}