React造轮子（reacthook实现一套自己的组件库）轮子公开课——第六课【Checkbox、CheckboxGroup】组件

最新推荐文章于 2025-09-30 05:43:26 发布

原创

最新推荐文章于 2025-09-30 05:43:26 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文详细介绍了React组件库中Checkbox与CheckboxGroup的实现原理，包括组件流程、代码解析及样式设计。CheckboxGroup用于管理Checkbox的选中状态，通过React.Children.map和React.cloneElement处理子组件变化。文章还展示了相关代码片段，如CheckBoxGroup.tsx和Checkbox.tsx，涉及事件处理、状态管理和CSS样式定制。

文章目录

一、组件库介绍

有兴趣的同学可以先着手看源码，之前写的一系列开源组件库项目（有帮助的同学也帮忙点个star👍）

名称	官网	github
tinkerbell-ui(vue2.0)	http://tinkerbell.top	https://github.com/hanbingxu82/tinkerbell-ui
tinkerbell-ui(vue3.0)	—	https://github.com/hanbingxu82/tinkerbell-ui-next
tinkerbell-ui(react-hook)	—	https://github.com/hanbingxu82/tinkerbell-ui-react

二、Checkbox、CheckboxGroup组件流程介绍

关于 CheckboxGroup 也就是用来包裹 Checkbox 的一个通用组件，用于处理 Checkbox 组件变化监听回调的这样一个组件，其实主要的也是如何使用父组件去监听子组件的变化这样一个点，所以我们要在 CheckboxGroup 组件当中去捕获 Checkbox 的一个value变化，所以我们给 Checkbox 一个 onChange，然后 CheckboxGroup 去抓取，因为 Checkbox、CheckboxGroup 是自定义组件所以我们使用React.Children.map、React.cloneElement 去对子组件内容进行捕获。

CheckBoxGroup
name?: string // 原生 name 属性
disabled: boolean // 是否统一禁用
options: any // js编程式组件列表
value: any // 绑定 value 值

CheckBox
type: string // 样式类型
checked: boolean // 是否选中
disabled: boolean // 是否禁用
checkGroupValue: any // 父 group 的 value 值
value: string | number // 单独 value 值
name?: string // 原生 name 属性
label: string // label 名称
indeterminate?: any // 是否为统一全选控制按钮组件

三、代码详解

3.1、CheckBoxGroup.tsx


import React from 'react'
import CheckBox from '../CheckBox/index'
interface Iprops {
   
   
  name?: string // 原生 name 属性
  disabled: boolean // 是否统一禁用
  options: any // js编程式组件列表
  value: any // 绑定 value 值
}
function CheckBoxGroup(props: any) {
   
   
  const {
   
    name, value = [], options = [] }: Iprops = props
  function handleChange(evt: any) {
   
   
    //  有就删除 没有就新增
    value.indexOf(evt.target.value) > -1
      ? value.splice(value.indexOf(evt.target.value), 1)
      : value.push(evt.target.value)
    //  判断check选中状态
    console.log(value)
    props.onChange && props.onChange(value, evt)
  }
  //  options 循环遍历
  const checkboxDom = options.map((item: any) => {
   
   
    return (
      <CheckBox
        key={
   
   item.value}
        value={
   
   item.value}
        checkGroupValue={
   
   value}
        name={
   
   name}
        disabled={
   
   item.disabled ? item.disabled : null}
        onChange={
   
   handleChange}
      >
        {
   
   item.label}
      </CheckBox>
    )
  })
  //  遍历dom子节点方式
  const checkboxItems = React.Children.map(props.children, (item) => {
   
   
    return React.cloneElement(item, {
   
   
      item,
      componentName: 'checkboxGroup',
      checkGroupValue: value,
      name,
      onChange: handleChange
    })
  })

  return (
    <div className='tb-checkbox-group'>
      {
   
   checkboxItems ? checkboxItems : checkboxDom}
    </div>
  )
}
export default CheckBoxGroup

3.2、Checkbox.tsx


import React, {
   
    useEffect, useState } from 'react'
import './index.scss'

const classnames = require('classnames')
interface Iprops {
   
   
  type: string // 样式类型
  checked: boolean // 是否选中
  disabled: boolean // 是否禁用
  checkGroupValue: any // 父 group 的 value 值
  value: string | number // 单独 value 值
  name?: string // 原生 name 属性
  label: string // label 名称
  indeterminate?: any // 是否为统一全选控制按钮组件
}
function CheckBox(props: any) {
   
   
  const {
   
   
    type = 'default',
    disabled