React使用Button的多选，设置默认勾选样式，会闪

于 2024-07-18 13:01:33 发布
阅读量308 收藏
点赞数 1
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85955297/article/details/140519825
版权

在我们使用很多的点击则添加对应样式，那么使用button添加类名，会闪一下，效果如下 

但是如果使用给button添加active，会闪一下，单个点击则选中单个

1、效果

按钮数据为：btns=[{buttons:[{title:"暂停“ id:"1" },  {title:"新建“id:"2"},{title:"编辑“ id:"3" }  ] }]

2、那么如何修改呢？有以下两种方法：
方法一：自己写一个右下角的样式处理，用是否创建去展示

方法二：用样式控制，显示或者隐藏，减少切换创建

诗棋吖
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react级联选择器/支持多选/单选
01-31
在React.js开发中，"react级联选择器/支持多选/单选"是一个常见的组件需求，用于构建具有层级关系的数据选择功能。这种组件通常被用在如地区选择、组织结构选择等场景，用户可以逐级展开选项，进行单选或多选操作。...
React 组件封装之 Button
杏子
09-21 4824
实现两种button按钮，一种实心铺满宽度为100%，一种空心宽度为30%（边框）。
React自定义组件--Button
weixin_42307490的博客
03-31 1816
React自定义组件--Button 这是主要js代码 import React, { Component } from 'react' import "./dist/index.css"; import PropTypes from "prop-types"; import classnames from "classnames"; class Button extends Component { constructor(props) { super(props);
React 项目--button 绑定事件（15）
datouniao1的博客
08-18 1940
不知不觉中写博客已经成为了一种习惯，不仅仅是一种学习知识吧，也是一种清楚自己学习了那些的内容。在前面的博客中我们慢慢的介绍了一些react基本的语法，现在我们继续来react按钮绑定事件 环境准备 首先我们创造一个组件，并且在组件上添加一个按钮 import React from 'react' import ReactDOM from 'react-dom' export default class BindEvent extends React.Component{ co
React-Hook 轮子公开课（从零开始）用最基础的方式写出一个简单的组件库——第二课【Button】组件
韩旭的博客
06-29 505
有兴趣的同学 可以先着手看源码，之前写的一系列开源组件库项目（有帮助的同学也帮忙点个star👍）提到 button 组件，这几乎可以说是一个组件库中的重中之重，基本上很多的时候我们都需要用到 button 来进行一系列的 dom 操作，时间执行，用户与浏览器之间进行交互不免得就少不了 button 按钮，那么我们先捋清楚一个思路这个 button 该怎么去写？ 3.2、index.scss 3.3、variables.scss（这里的文本样式是参考的 bin-ui ） 四、效果呈现 至此效果实现当然.
React-component-library--Button
weixin_45269534的博客
06-25 166
React-component-library--Button。
react-multi-select:React的多选组件
05-17
有关如何使用该组件的信息，请参见/src/stories/index.js的示例，但这是最低要求的设置： import React from 'react'; import MultiSelect from "@khanacademy/react-multi-select"; const options = [ {label: ...
react项目scss重置浏览器默认样式 normalize.scss
08-04
人力资源管理项目，antd+react前端，重置浏览器默认样式
react-rdatepicker基于react的日历选择组件支持单选多选
08-15
`react-rdatepicker`是一个专为React设计的日历选择组件，它提供了灵活的选择机制，包括单选和多选，极大地提升了用户体验。本文将深入探讨`react-rdatepicker`的核心特性和使用方法。 ### 一、组件安装 首先，你...
multiselect-react-dropdown:使用搜索和各种选项React多选下拉列表
04-28
React多选下拉 :collision: :collision: :collision: 用于组件延迟加载的React库。 小而高效。 :collision: :collision: :collision:描述一个React组件，提供具有多种功能的多选功能，例如选择限制，CSS自定义，复选...
【react】封装自定义组件之Button组件
qq_39295665的博客
09-21 2572
学习react当然必不可少的就是自定义组件啦！ 看一下效果图 首先看一下项目结构 （划去部分不需要） base文件夹 这部分模仿we-ui结构 we-ui源码 源码 index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('root') )
react封装组件Button-第二章
weixin_43954090的博客
04-07 1365
先定义一些typescript类型 import React, { FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react' export type ButtonSize = 'lg' | 'sm' export type ButtonType = 'primary' | 'default' | 'danger' | 'link' interface BaseButtonProps { className?: string; /**
React+TS前台项目实战（六）-- 全局常用组件Button封装
最新发布
weixin_43883615的博客
06-11 649
今天这篇主要讲全局按钮组件封装，可根据UI设计师要求自定义修改。下一篇讲【全局模态框Modal组件、公共弹窗Dialog组件封装】。关注本栏目，将实时更新。
react18-学习笔记42-button组件分析
qq_41632427的博客
10-07 192
jira
关于react-Ant Design框架Button按钮的基础用法
weixin_45745641的博客
03-28 3668
前言 最近在学习react-Ant Design框架，把button组件一些用法记录一下 引入框架 使用组件 首先我们得引用Ant Design和里面的button，才能进行使用
react native 多选按钮
大灰狼的小绵羊哥哥的博客
09-04 2166
转载http://www.cnblogs.com/huangjialin/p/6179397.html 在做项目的时候有一个需求，是可以选择多个条件的，特地在Github上找了一些案例，发现没有什么合适的，于是自己根据这些案例，改装一下，封装了一个合适自己的。先看我封装的代码。 1 import React, {Component} from 'react'; 2 im
React封装组件（Button按钮和Modal模态框）
欢迎
12-01 2236
React封装组件（Button按钮和Modal模态框）
react button 加颜色_编写有弹性的react组件
weixin_34377037的博客
01-14 921
当大家开始学习 React 时，常常问到风格指南。虽然呢，项目中应用一致的规则，是个不错的主意，但是很多规则挺随意的——所以 React 对这些并没有强烈的意见。你可以使用不同的类型系统，使用函数声明或者箭头函数，也可以对你的属性按字母序或任何你愿意的其他顺序来排序。这样的灵活性允许在项目中 整合 React 时，能应用已有的一些约定习惯。不过同时，这也会引发无休止的争论。有一些每个组件都应极力遵...
react实现给多选下拉框添加默认值
07-14
在 React 中给多选下拉框添加默认值，可以通过设置 `defaultValue` 或 `value` 属性来实现。下面是一个示例： ```jsx import React, { useState } from 'react'; const MultiSelectDropdown = () => { const ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值