单选框

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Hello React!</title>

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <style>

        .item{

            width: 20px;

            height: 20px;

            margin: 20px 0;

            border: 1px solid #666;

        }

        .item>div{

            height: 20px;

        }

        .checked{

            background: red;

        }

    </style>

</head>

<body>

    <div id="root"></div>

    <script type="text/babel">

        class CheckBox extends React.Component {

            constructor(props) {

                super(props);

                this.state = {

                    tagIndexList: [],

                    value:[],

                    index:null,

                    arr: [

                        {

                            item: "item1"

                        },

                        {

                            item: "item2"

                        },

                        {

                            item: "item3"

                        },

                        {

                            item: "item4"

                        }

                    ]

                };

                this.handleClick = this.handleClick.bind(this);

            }

            handleClick(num,item){

             this.setState({

                index:num

             })

             console.log(item);

            }

            render() {

                return (

                    <div>

                        {

                            this.state.arr.map((item, index) => {

                                return (

                                    <div key={item.item}  className="item">

                                       <div className={this.state.index===index?"checked":""} onClick={()=>this.handleClick(index,item.item)}></div><span>{item.item}</span>

                                    </div>

                                )

                            })

                        }

                    </div>

                )

            }

        }

        ReactDOM.render(

            <CheckBox />,

            document.getElementById('root')

        )

    </script>

</body>

</html>


复选框

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Hello React!</title>

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <style>

        .item{

            width: 20px;

            height: 20px;

            margin: 20px 0;

            border: 1px solid #666;

        }

        .item>div{

            height: 20px;

        }

        .checked{

            background: red;

        }

    </style>

</head>

<body>

    <div id="root"></div>

    <script type="text/babel">

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119882555

使用React.js写一个类似单选框与复选框的功能的更多相关文章

  1. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

  2. CSS学习笔记三：自定义单选框，复选框，开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

  3. html基本标签表单实现交互原理，单选框，复选框，下拉框介绍

    表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器.用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框.复选框.下拉框(也就是下拉菜单) ...

  4. 自动化测试-15.selenium单选框与复选框状态判断

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...

  5. 2.12 单选框和复选框（radiobox、checkbox）

    2.12 单选框和复选框(radiobox.checkbox) 本篇主要介绍单选框和复选框的操作一.认识单选框和复选框    1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是 ...

  6. Selenium2学习（十五）-- 单选框和复选框（radiobox、checkbox）

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...

  7. HTML--使用单选框、复选框，让用户选择

    在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看 ...

  8. Selenium3+python自动化 单选框和复选框

    一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了,可以先抽他了. 二.radio和 ...

  9. Selenium+java - 单选框及复选框处理

    一.什么是单选框.复选框? 二.被测页面html源代码 CheckBoxRadioDemo.html <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. uniapp-scroll-view纵向(竖向)滑动当scrollTop为0时卡顿问题

    这个问题目前遇到的人少,所以找到答案不容易,我也是各种细节亲测才发现的解决方案.记录下来 当uniapp用scroll-view竖向滚动时,在scrollTop为0时,下拉会卡顿. 解决方法(只需要在 ...

  2. 小程序 text标签内的文字竖着排列

    html:   <view><text>活动规则</text></view>   css: view {   height: 135rpx;   wid ...

  3. HCNP Routing&Switching之组播技术PIM-SM 稀疏模式

    前文我们了解了组播路由协议PIM以及PIM-DM密集模式相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16084310.html:今天我们来聊一聊PI ...

  4. 软件工程web课程第一次实验作业

    开头总结 本次作业使用html+css+js实现了一个简单页面 最终我要记录的是使用js完成了轮播图中图片背景的转换 <script> window.onload = function ( ...

  5. thinkphp6事件监听event-listene

    事件系统可以看成是行为系统的升级版,相比行为系统强大的地方在于事件本身可以是一个类,并且可以更好的支持事件订阅者. 事件相比较中间件的优势是事件比中间件更加精准定位(或者说粒度更细),并且更适合一些业 ...

  6. 如何离线安装posh-git

    不用上github 1.下载post-git离线安装包 地址:https://files.cnblogs.com/files/xcr1234/posh-git-master.zip 2,用Powers ...

  7. petite-vue源码剖析-沙箱模型

    在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式,而且能够读取当前作用域上的属性.而evaluate的实现如下: const evalCache ...

  8. [笔记] 有向无环图 DAG

    最小链覆盖 (最长反链) 最小链覆盖 \(=n-\) 最大匹配. 考虑首先每个点自成一条链,此时恰好有 \(n\) 条链,最终答案一定是合并(首尾相接)若干条链形成的. 将两点匹配的含义其实就是将链合 ...

  9. 2.4 小白必看：零基础安装Linux系统（超级详细）

    我们以新发布的 CentOS 8.1 为例,学习如何安装Linux系统. 准备工作: 1. 一台可以访问互联网的电脑 2. VMware Workstation安装包 3. CentOS8.1镜像文件 ...

  10. .NET混合开发解决方案15 WebView2控件集成到WinForm程序编译后的文件及结构说明

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...