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

文章图片

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. 父组件使用子组件传值 【react|ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项】父组件使用子组件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 { … 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_OPTIONmap遍历生成Checkbox时，需要index参数，是禁用判断的关键

const CommentFilterDropdown = ({ setSelectedKeys, selectedKeys,//一个存放相关信息的对象 select, }) => { // 当选中选项时会返回一个checkedvalue数组，再存储到selectedKeys.foodTypes将已选选项值记录下来 const onChange = checkedvalue => { checkedvalue?.sort((a, b) => a - b) setSelectedKeys({ ...selectedKeys, foodTypes: checkedvalue }) }食物类型 // ※checkbox Group的value要用 selectedKeys.foodTypes 来控制！ // 遍历APPEND_OPTION 选项都生成一个Checkbox，注意要使用(item，index)，index是用来禁用选项的关键 {APPEND_OPTION.map((item, index) => ( // 对于每个Checkbox，value为APPEND_OPTION对应的value 1，且select不包含yinpin返回true，表示index>1的选项将被禁用；如果以上两种情况都不存在，例如select='yinpin&&shuiguo&&vegetable'全部不禁用 */ disabled={ (index <= 1 && select === 'yinpin') || (index > 1 && !select?.includes('yinpin')) } > {item.label} ))} }