reactjs--实现switch按钮组件(并监听状态)

1、首先引入相关js

2、实现switch按钮的css

.switch{
   display:none;
}

label{
   position:relative;
   display: block;
   border-radius: 24px;
   width:100px;
   height: 40px;
   border:2px solid green;
   cursor: pointer;
}
label:before{
   content: '开启';
   line-height:36px;
   text-indent: 50px;
   color:green;
   display: block;
   border-radius: 20px;
   height: 36px;
   -webkit-transition: all 0.3s ease;
}
label:after{
   content: '';
   position: absolute;
   top:0;
   left:1px;
   width: 37px;
   height: 37px;
   border-radius: 50%;
   background-color: #fff;
   box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
   -webkit-transition: all 0.3s ease;
}
.switch:checked~label:after{
   margin-left: 60px;
}

.switch:checked~label:before{
   background-color:green;
   content: '关闭';
   text-indent: 10px;
   color:#fff;
}

3、reactjs组件代码

id="toggle">

4、效果图