单选框

<!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. linux – tty,ttyS,pts,ptmx,vcs,vcsa设备文件之间的区别？(/dev/tty等)

    linux – tty,ttyS,pts,ptmx,vcs,vcsa设备文件之间的区别? 终端有字符终端和图形终端两种模式.在linux的图形环境下,我们可以通过鼠标点击来完成所有的管理任务,这是图形 ...

  2. 基于easyx的小时钟

    #include <graphics.h> #include <math.h> #include <conio.h> #define PI 3.141592654 ...

  3. OSPF 路由协议详解（一）

    (文章目录) ospf 协议是网络层协议 此篇文章适合有一定网络基础的人 ospf 协议最多应用在企业网络中,针对于运营商网络并不是特别的适用,端口号为 89 通过 IP 进行数据的转发 ospf 基 ...

  4. k8s 初始化环境(1)

    概念 k8s/kubernetes 容器化部署 解决容器编排问题,kubernetes为容器编排软件的佼佼者 kubernets为一组服务器集群 功能 自我修复 一个容器崩溃,另一个容器起来 弹性伸缩 ...

  5. C++篇：第八章_类_知识点大全

    C++篇为本人学C++时所做笔记(特别是疑难杂点),全是硬货,虽然看着枯燥但会让你收益颇丰,可用作学习C++的一大利器 八.类 (一)类的概念与规则 "子类"和"子类型& ...

  6. js如何判断一个对象是不是Array？ 三种方法总有一种可以帮上忙

    转载:http://www.nowamagic.net/librarys/veda/detail/1250 在开发中,我们经常需要判断某个对象是否为数组类型,在Js中检测对象类型的常见方法都有哪些呢? ...

  7. jdk1.8中hashmap的扩容resize

    当hashmap第一次插入元素.元素个数达到容量阀值threshold时,都会扩容resize(),源码: (假设hashmap扩容前的node数组为旧横向node数组,扩容后的node数组为新横向n ...

  8. Linux命令篇 - grep 命令

    grep grep searches the named input FILEs (or standard input if no files are named, or if a single hy ...

  9. 分享我做Dotnet9博客网站时积累的一些资料

    从2019年使用WordPress搭建Dotnet9网站,到现在手撸代码开发,介绍中间使用的一些资源,绝无保留,希望对大家有用. 1. 申请域名.搭建WordPress网站 时间点:2019年11月 ...

  10. BGP路由协议详解(完整版)

    (免责声明:来源于网络,版权原作者所有,转载仅为了传播.学习交流使用,如需删除请私信联系,严禁其他用途.) END 关注「开源Linux」加星标,提升IT技能 好文章,分享.点赞.在看三连哦️↓↓↓