react滑块验证码

1.css

.simple-verify{
    line-height: 38px;
    width: 250px;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #797979;
    display: flex;
    flex-wrap: wrap;
 
    .simple-left{
        user-select: none;
        text-align: center;
        color: white;
        border-radius: 3px 0 0 3px;
        height: 100%;
        width: 120px;
        width: 0;
    }
    .simple-slider{
        user-select: none;
        cursor: pointer;
        border-radius: 0 3px 3px 0;
        text-align: center;
        line-height:38px ;
        width: 55px;
        height: 100%;
        font-size: 20px;
        color: #666666;
        background-color: #E0E0E0;
    }
    .simple-right{
        user-select: none;
        text-align: center;
        color: #D7D7D7;
        width: 73px;
        width: 193px;
        height: 100%;
        background-color: white;
    }
}

1. 组件

   import React, { useRef, useState,useEffect } from 'react';
   
   import './simple-verify.less'
   
   export default function Slider(props:any) {
       // 显示隐藏
       const leftRef: any = useRef()
       const rootRef: any = useRef()
       const rightRef: any = useRef()
       const centerRef: any = useRef()
       const [successText, setSuccessText] = useState('')
       const [textTitle, setTextTitle] = useState('请移动滑块至最右边')
       useEffect(()=>{
           if (!props.showSlider) {
               setSuccessText('')
               setTextTitle('请移动滑块至最右边')
           }
       })
       const lashen = (events: any) => {
           var mouseDownX = events.clientX // 左边位置
           var Wl = leftRef.current.clientWidth
           console.log(leftRef.current.style);
           leftRef.current.style.backgroundColor = '#4BA7FE'
           rootRef.current.style.borderColor = '#4BA7FE'
           setSuccessText('')
           window.onmousemove = function (event) {
               setTextTitle('')
               if (rootRef.current.offsetWidth - leftRef.current.offsetWidth - centerRef.current.offsetWidth - 2 < 1) {
                   leftRef.current.style.width = 193 + 'px';
                   rightRef.current.style.width = '0px'
                   leftRef.current.style.backgroundColor = '#76CD4B'
                   rootRef.current.style.borderColor = '#76CD4B'
                   setSuccessText('验证成功')
                   props.resultClick(1)
                   
               }else {
                   leftRef.current.style.width = event.clientX - mouseDownX + Wl + 'px';
                   rightRef.current.style.width = rootRef.current.offsetWidth - leftRef.current.offsetWidth - centerRef.current.offsetWidth - 2 + 'px'
               }
           };
           window.onmouseup = function () {
               if (rootRef.current.offsetWidth - leftRef.current.offsetWidth - centerRef.current.offsetWidth - 2 > 0) {
                   leftRef.current.style.backgroundColor = '#F6535B'
                   rootRef.current.style.borderColor = '#F6535B'
                   props.resultClick(2)
               }
               window.onmousemove = null
           }
       }
       return (
           <div>
               {
                   props.showSlider  ? (<div ref={rootRef} className='simple-verify'>
                   <div ref={leftRef} className='simple-left'>
                       {successText}
       
                   </div>
                   <div onm ouseDown={lashen} ref={centerRef} className='simple-slider'>>>></div>
                   <div ref={rightRef} className='simple-right'>
                       {textTitle}
                   </div>
               </div>) : null
               }
           </div>
   
       );
   }
   

2. 父组件

   import React,{useState} from 'react';
   import Table from '../components/table/index';
   
   import Slider from './slider';
   export default function Page1() {
      
       const [showSlider, setShowSlider] = useState(false)
       const showClick = () =>{
           setShowSlider(true)
       }
       const hidClick = () =>{
           setShowSlider(false)
       }
       const resultClick = (e:number)=>{
          if (e==1) {
           console.log('成功');
           
          }else if(e==2){
           console.log('失败');
          }
       }
     return (
       <div>
           <button onClick={showClick}>显示</button>
           <button onClick={hidClick}>隐藏</button>
         {/* <Table></Table> */}
         <Slider showSlider={showSlider} resultClick={resultClick}></Slider>
       </div>
     );
   }