ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项

ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项_第1张图片
antd官方文档中Checkbox Group给出的api如下:
ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项_第2张图片

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

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

具体需求

举例:
select==='yinpin'时,只存在yinpin时,前两个禁用
ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项_第3张图片
当select不包括yinpin时,后两个禁用
ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项_第4张图片

实现

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 Groupvalue 为数组 foodTypes (专门存储已选选项的value)
  2. foodTypes 的变化由 Checkbox Grouponchange事件 监控并更新
  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>
}

你可能感兴趣的:(react,前端,react,hooks,checkbox,多选框组,禁用)