React结合Antd的Checkbox实现选择框全选、半选功能

最新推荐文章于 2024-01-08 11:54:23 发布

莉兹Liz

最新推荐文章于 2024-01-08 11:54:23 发布

阅读量4.3k

点赞数

分类专栏： React JS 文章标签： js react

本文链接：https://blog.csdn.net/qq_40138556/article/details/108771179

版权

本文介绍了如何使用React结合Antd库的Checkbox组件，实现在鼠标移入卡片时改变边框颜色，点击卡片实现选择并记录选中数量，以及Checkbox的全选和全不选功能。通过示例展示了React组件的实现方式和样式设计。

摘要由CSDN通过智能技术生成

默认全不选，鼠标移入卡片上，卡片外框变色
在这里插入图片描述
点击卡片实现选择效果，选择框实现半选功能，同时记录数量

点击选择框，变为全选，再点击，全不选

/**
 * demo
 */
import React, {
    Component } from 'react';
import {
    Checkbox } from 'antd';
import './index.css';
import {
    CheckCircleFilled } from '@ant-design/icons';

class Demo extends Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   
            checkOptions: [
                {
   
                    "id":1,
                    "imgPath":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1166927975,3250256027&fm=26&gp=0.jpg",
                    "title":"蛋糕一",
                    "price":60.50,
                    "inventory":100
                },
                {
   
                    "id":2,
                    "imgPath":"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2716279000,803856934&fm=26&gp=0.jpg",
                    "title":"蛋糕二",
                    "price":80.00,
                    "inventory":40
                },
                {
   
                    "id":3,
                    "imgPath":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600929242805&di=f8d583a852d3a0647c21833e5e000737&imgtype=0&src=http%3A%2F%2Fp4.ssl.cdn.btime.com%2Ft0150e63ddb193dd5d3.jpg%3Fsize%3D1200x754",
                    "title":"蛋糕三",
                    "price":40.50,
                    "inventory":60
                },
                {
   
                    "id":4,
                    "imgPath":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600929221288&di=ebf38693effa07a0d38d8f358647ae55&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1746995900%2C3436569116%26fm%3D214%26gp%3D0.jpg",
                    "title":"蛋糕四",
                    "price":60.50,
                    "inventory":60
                }
            ],
            indeterminate: false,