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

react|ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项
文章图片

antd官方文档中Checkbox Group给出的api如下:
react|ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项
文章图片

据图可知,其中Group 的 api 只有一个disabled,它的作用是使整个group选项全部失效,达不到我们的效果,但是Checkbox中却有api disabled 可以使选项单独失效。
所以,可以 Checkbox 和 Checkbox Group 结合使用,实现方式如下:
具体需求 举例:
select==='yinpin'时,只存在yinpin时,前两个禁用
react|ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项
文章图片

当select不包括yinpin时,后两个禁用
react|ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项
文章图片

实现 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值。
关键点:
  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 }) }
食物类型
// ※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} ))} }

    推荐阅读