Antd组件中单选框、复选框自定义样式的优雅实现

最新推荐文章于 2024-04-30 16:39:26 发布
最新推荐文章于 2024-04-30 16:39:26 发布
阅读量3.3k 收藏 1
点赞数
文章标签： javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/222tjr-blog/p/8023336.html
版权

表单组件的样式控制算是antd组件使用的一大坑了。

.以antd-mobile为例，checkbox选中与非选中状态是由Input包裹的父元素的‘.am-checkbox-checked’来控制的

未选中时的DOM结构（没有am-checkbox-checked）

选中时的DOM结构（有am-checkbox-checked类名）

然而通常情况下选中和非选中的时候我们需要改变的是  class="am-checkbox-wrapper" 的样式，

这时候问题就变成了  子元素改变，父元素需要跟着改变，用css目前为止还不能实现，由于浏览器的渲染机制，父选择器的出现几乎还不可能，在我优化代码之前，源代码是之前公司做后台的一个大佬写的，他的解决办法是在 onchange事件里实时的监控 ，js获取DOM，操作父节点；

作为一个有原则有底线的前端，怎么能忍受使用react的同时又频繁的操作DOM？

不说废话，直接上代码

 

 给 Radio 或checkbox 添加一个父元素div，类名随Radio 或checkbox的checked值变化，然后在css中写好两套自定义样式，o了。

 

转载于:https://www.cnblogs.com/222tjr-blog/p/8023336.html

weixin_30271335
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
更改AntD中CheckBox样式
莉兹Liz的博客
02-03 6003
代码 index.js文件 import React from 'react'; import { Checkbox } from 'antd'; import './index.less'; class demo extends React.PureComponent { constructor(props) { super(props); this.state = { checkBoxValue: [], checkBoxOptions: [ // { label: '周
antd checkbox 默认选中_antd 开发的一些坑（一）
weixin_29605607的博客
01-03 2749
使用antd以来，有些东西总是现用现查，现总结一波，以提升开发效率一：表格下钻及默认展开一级{ treeData && treeData.length > 0 ? ( <Table rowKey={record => `${record.deptCode}`} ...
使用Ant Design中的多选框组件时修改其多选框样式
热门推荐
何良语的博客
06-01 1万+
样式必须在全局样式中修改才能生效，位于global文件夹中的less文件或者index.less或global.less文件具体优先级自行计算当选中多选框或者label时，多选框的边框改变颜色：.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbo...
antd 单选框a-radio，多选框a-checkbox样式调整
最新发布
donghua201的博客
04-30 740
使用组件实现按钮样式。
antd 常见组件的样式修改
JIANLI0123的博客
09-03 3607
Select .ant-select-selection { /* 选择框 样式 */ border: none; border-bottom: 1px solid rgba(226,226,234,1); border-radius: 0; } .ant-select-selection.ant-select-selection--single { /* 选择框 click */ border: none; border-bottom: 1px solid rgba(226
antdesign 表单中的单选按钮处理
马优晨
06-22 1万+
如上图所示，是一个单选按钮，如果需要获取单选按钮的默认值，那样怎么处理呢？ 代码： class FilterForm extends ListFilterForm { constructor() { super(); this.state = { //先声明变量并初始化 isAll: true } } handleSubmit= ...
android中怎么保存checkbox中的checked属性_element-ui简单笔记(中)
weixin_39965490的博客
11-23 246
element-ui的简单笔记关注一下公众号：内有相关文章！！ 八、Form相关组件##### 8.1 Radio单选按钮1.创建Radio按钮<!--组件创建--> 注意:在使用radio单选按钮是至少加入v-model和label两个属性2.Radio按钮属性的使用<总结:属性使用还是直接卸载对应的组件标签上以 属性名=属性值 方式使用3.Radio事件的使用<总结:事...
antd组件Upload实现自己上传的实现示例
10-17
在本文中，我们将深入探讨如何使用Ant Design（antd）组件库中的`Upload`组件来实现自定义上传功能。Ant Design是一个流行的React UI框架，提供了一系列美观且实用的组件，其中包括`Upload`，用于处理文件上传操作。...
react实现复选框全选和反选组件效果
11-19
在React开发中，实现复选框全选和反选功能是一项常见的需求，特别是在表单或者数据筛选场景下。本文将详细解析如何通过React组件来实现这一功能。 首先，我们需要创建一个名为`List`的React组件。这个组件会包含一...
限制复选框的最大可选数
12-03
这个示例代码就是实现这一功能的具体方法，它通过JavaScript来控制复选框的最大可选数。 首先，代码中定义了两个变量： 1. `sCtrlPrefix`：这是一个字符串变量，用于表示复选框的名称前缀。在这个例子中，所有复选...
三种取消选中单选框radio的方法
12-09
在网页开发中，单选框（Radio）常用于让用户在多个选项中选择一个。当需要取消用户的选择，即让所有单选框都不被选中时，可以采用多种方法。这里我们将详细探讨标题提及的三种取消选中单选框radio的方法，它们均依赖...
antd Form组件方法getFieldsValue获取自定义组件的值操作
01-18
自定义组件 1、自定义组件被getFieldsValue包裹，会获得以下属性 onChange方法, 子组件调用此方法，可将值传给父组件，从而Form可拿到自定义组件的值 value属性，获得初始值 2、组件调用 像Form表单内的组件一样...
checkbox这类组件的通过伪元素实现自定义图标
qq_35703552的博客
05-30 413
你还在为checkbox这类组件的勾选样式不符合ui设计而苦脑吗？下面手摸手教你修改三方组件的样式 通过调试发现其实就是通过伪元素实现的加载对应的字体图标 :deep(.nut-checkbox__icon)::before { width: 18px; height: 18px; content: ''; background: url('../../../../../../assets/icons/select_all.png') no-repeat 0 0; backgrou.
antd Checkbox.Group实现单选
WJLcomeon的博客
02-27 1639
antd Checkbox.Group实现单选
React + antd 中 的 CheckBox 实现限制复选框可选的个数
Ashy- 在这里成长
07-10 2488
React + antd 中 的 CheckBox 实现限制复选框可选的个数 一、React + antd 中 的 CheckBox 实现限制复选框可选的个数 1.优化后的代码 3行 实现： 代码如下（示例）： import React, { useState, useEffect } from "react"; import { Checkbox } from "antd-mobile"; // 这里使用的是 antd-mobile，antd本质上原理一样 const CheckboxItem = Che
AntD Checkbox 的三种状态处理
weixin_33859665的博客
05-05 1万+
对于单个 Checkbox 来说，只有两种值：选中 (checked) 或未选中 (unchecked) 。 但对于 Checkbox Group 来说，却有三种值：全选 (checked) 、部分选中 (indeterminate) 、未选中(unchecked) AntD 对于Checkbox Group的实现如下 import React, { useState } from 'reac...
多选框转换为单选框 使CheckBox拥有Radio同样的功能（以Ant Design of Vue为例）
crowningJewel的博客
03-17 5741
前言：开发过程遇到的需求，要求实现单选功能，但是单选框样式却是多选框的样式，故记录一下（仅仅记录思路）。 首先是antd的代码，如下 <a-checkbox-group @change="onChangeOption" v-model="checkBoxObj.checkedList"> <a-checkbox v-for="(item, index) in checkBoxObj.children" :key="index" :value="item.val">
antd Checkbox 如何套多层
weixin_43416349的博客
11-06 971
答： 通过 onchang属性监听子 是否被点满吗，如果点满，就设置最外层的 的 checked 为true。1、 是如何控制 3、被包裹的，它的checked属性会失效。2、子 被点满后，最外层如何变为亮。
常用二次封装Ant-design组件（1）--- CheckBox
菠萝萝的博客
02-28 675
废话文学：一年没怎么更新过文章了，在忙着荒野求生（换了work+摸鱼）。但是，最近在工作的时候看到设计稿里的集成功能熟悉又陌生（其实就是包含了组件，然后组件又达不到这个要求），然后出现的频率还挺高的，先记录一下（二开倒是没什么难度，也不复杂，就是会浪费点开发时间），这里只针对Antd封装（版本^5.2.3），找个时间发个包，提高开发效率。
用Antd Radio组件循环显示单选框
07-14
如果你想使用 Ant Design 中的 Radio 组件来循环显示单选框，你可以利用 JavaScript 的 map 方法来遍历选项并生成相应的 Radio 组件。下面是一个示例： ```jsx import React, { useState } from 'react'; import { Radio } from 'antd'; function Modal() { const options = ['选项 1', '选项 2', '选项 3']; const [selectedOption, setSelectedOption] = useState(''); const handleOptionChange = (event) => { setSelectedOption(event.target.value); }; return ( <div> <h2>选择一个选项：</h2> <Radio.Group onChange={handleOptionChange} value={selectedOption}> {options.map((option, index) => ( <Radio key={index} value={option}> {option} </Radio> ))} </Radio.Group> </div> ); } export default Modal; ``` 在这个例子中，我们首先定义了一个选项数组 `options`，其中包含了要显示的选项。然后，我们使用 `map` 方法遍历 `options` 数组，并为每个选项生成一个 Radio 组件。在循环过程中，我们为每个 Radio 设置了一个唯一的 `key` 属性，并将选项值作为 `value` 属性传递给 Radio 组件。最后，我们将 Radio.Group 组件包裹在循环中，设置其 `onChange` 和 `value` 属性来跟踪和更新选中的选项。 请确保在使用之前先安装 Ant Design 包。你可以通过运行以下命令来安装 Ant Design： ``` npm install antd ``` 希望这可以帮助到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值