[JavaScript知识库]ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项

antd官方文档中Checkbox Group给出的api如下：

据图可知，其中Group 的 api 只有一个disabled，它的作用是使整个group选项全部失效，达不到我们的效果，但是Checkbox中却有api disabled 可以使选项单独失效。

所以，可以 Checkbox 和 Checkbox Group 结合使用，实现方式如下：

具体需求

举例：
当select==='yinpin'时，只存在yinpin时，前两个禁用

当select不包括yinpin时，后两个禁用

实现

tip：以下代码不完整，只关注多选框组禁用选项功能的相关核心代码

提前声明，此处select有以下值：

• shuiguo（默认）
• yinpin
• vegetable
  …………

1. 父组件使用子组件传值

父组件使用子组件CommentFilterDropdown时，传入select

use-query-params：具体可查询官方文档

import CommentFilterDropdown from './CommentFilterDropdown'
import {ArrayParam, StringParam,useQueryParam,withDefault} from 'use-query-params'

// 从URL中读取查询参数 `foodTypes` 并使用数组类型存储其解码后的数值
const [foodTypes, setFoodTypes] = useQueryParam('foodTypes', ArrayParam)
// 从URL中读取查询参数 `select` 使用字符串类型存储其解码后的数值，默认设为'shuiguo'
const [select] = useQueryParam('select', withDefault(StringParam, 'shuiguo'))

// selectedKeys 是一个对象，存储相关信息，例如 FoodsTypes 的值
const { selectedKeys } = props
<CommentFilterDropdown
  select={select}
  onClear={() => {
    …
    setFoodTypes()
  }}
  onConfirm={() => {
    …
    setFoodTypes(selectedKeys.FoodsTypes)
  }}
/>

2. 子组件CommentFilterDropdown实现功能

FoodsTypes指的其实就是APPEND_OPTION 内选项的 value

export const APPEND_OPTION = [
  { label: '芒果', value: '1' },
  { label: '香蕉', value: '2' },
  { label: '咖啡', value: '3' },
  { label: '奶茶', value: '4' },
]

子组件接收父组件传来的select值。

关键点：

1. Checkbox Group 的 value 为数组 foodTypes （专门存储已选选项的value）
2. foodTypes 的变化由 Checkbox Group 的 onchange事件 监控并更新
3. APPEND_OPTIONmap遍历生成Checkbox时，需要index参数，是禁用判断的关键

const CommentFilterDropdown = ({
  setSelectedKeys,
  selectedKeys,		//一个存放相关信息的对象
  select,
}) => {
	// 当选中选项时会返回一个checkedvalue数组，再存储到selectedKeys.foodTypes将已选选项值记录下来
	const onChange = checkedvalue => {
	    checkedvalue?.sort((a, b) => a - b)
	    setSelectedKeys({ ...selectedKeys, foodTypes: checkedvalue })
	}

  	<div>食物类型</div>
	// ※checkbox Group的value要用 selectedKeys.foodTypes 来控制！
	<Checkbox.Group onChange={onChange} value={ selectedKeys.FoodsTypes }>

		// 遍历APPEND_OPTION 选项都生成一个Checkbox，注意要使用(item，index)，index是用来禁用选项的关键
	    {APPEND_OPTION.map((item, index) => (
	    	// 对于每个Checkbox，value为APPEND_OPTION对应的value
	      	<Checkbox
	        	key={item.key}
	        	value={item.value}
	        	/*禁用判断：
	        		  数组下标<=1，且select只有yinpin返回true，表示index<=1的选项将被禁用；
	        		  数组下标>1，且select不包含yinpin返回true，表示index>1的选项将被禁用；
	        		  如果以上两种情况都不存在，例如select='yinpin&&shuiguo&&vegetable'全部不禁用
	        	*/
	        	disabled={
	          		(index <= 1 && select === 'yinpin') ||
	          		(index > 1 && !select?.includes('yinpin'))
	        	}
	      	>
	        	{item.label}
	      	</Checkbox>
	    ))}
	</Checkbox.Group>
}

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读