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
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
值。
关键点:
Checkbox Group
的 value 为数组 foodTypes (专门存储已选选项的value)- foodTypes 的变化由
Checkbox Group
的 onchange事件 监控并更新 APPEND_OPTION
map遍历生成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>
}