ReactHooks+Antd Checkbox Group multi-select box group disables its options individually

The api given by Checkbox Group in the antd official document is as follows:

As can be seen from the figure, there is only one API for Group disabled, and its function is to invalidate the entire group option, which cannot achieve our effect, but there is an API in Checkbox that disabledcan invalidate the option alone.

Therefore, Checkbox and Checkbox Group can be used in combination, and the implementation method is as follows:

specific requirement

Example:
At that timeselect==='yinpin' , when only yinpin exists, the first two are disabled.

When the select does not include yinpin, the last two are disabled

accomplish

tip: The following code is incomplete, and only focuses on the core code related to the disabled option function of the multi-select box group

To state in advance, select here has the following values:

• shuiguo (default)
• yinpin
• vegetable
  …………

1. The parent component uses the child component to pass the value

CommentFilterDropdownWhen the parent component uses the child component , pass inselect

use-query-params: You can query the official documents for details

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. The subcomponent CommentFilterDropdown realizes the function

FoodsTypesIt refers to APPEND_OPTIONthe value of the inner option

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

Child components receive values ​​passed from parent components select.

key point:

1. Checkbox GroupThe value is an array foodTypes (specially stores the value of the selected option)
2. The change Checkbox Groupof foodTypes is monitored and updated by the onchange event
3. APPEND_OPTIONWhen map traversal generates Checkbox, the index parameter is required , which is the key to disable judgment

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>
}