checkGroup 有全选框的时候的indeterminate的作用

最新推荐文章于 2024-05-22 09:58:49 发布

混血哲谈

最新推荐文章于 2024-05-22 09:58:49 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/u010856177/article/details/103530005

react 专栏收录该内容

42 篇文章

订阅专栏

本文探讨了checkGroup组件中全选框与子项选择状态同步的问题，详细介绍了如何通过indeterminate属性控制全选状态，确保只有当所有子项被选中时全选框才勾选，同时提供了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

checkGroup 有全选框的时候，其子项的选择不会使全选中的状态发生改变，除非是全部选中，通过indeterminate进行的控制。

举例如下：

 onChange = (checkedList: any) => {
        const { onChange } = this.props as any;
        if (!('value' in this.props)) {
            this.setState({
                checkedList,
                // indeterminate: !!checkedList.length && checkedList.length < this.plainOptions.length,
                checkAll: checkedList.length === this.plainOptions.length,
            })
        }
        onChange(
            {
                checkedList,
                indeterminate: !!checkedList.length && checkedList.length < this.plainOptions.length,
                checkAll: checkedList.length === this.plainOptions.length,
            }
        )
    };
onCheckAllChange = (e: any) => {
        const { onChange } = this.props as any;
        if (!('value' in this.props)) {
            this.setState({
                checkedList: e.target.checked ? this.plainOptions.map(item => item.value) : [],
                indeterminate: false,
                checkAll: e.target.checked,
            });
        }
        onChange(
            {
                checkedList: e.target.checked ? this.plainOptions.map(item => item.value) : [],
                indeterminate: false,
                checkAll: e.target.checked,
            }
        )

    };