2022-06-01 学习记录--React-简易滑动验证之react组件(react-simple-verify)

React-简易滑动验证之react组件(react-simple-verify)

一、文档

https://gitee.com/mycssweb/react-simple-verify/

二、使用步骤

1、安装react-simple-verify组件

安装方法：npm i react-simple-verify

2、对应代码

import React, { Component } from 'react';
import ReactSimpleVerify from 'react-simple-verify'; // 引入react滑块验证
import 'react-simple-verify/dist/react-simple-verify.css'; // 引入react滑块验证的css
export default class CaptchaCode extends Component {
	// 验证成功之后进行的操作
    success(){
        alert('验证成功');
    }
    // 重置
    reset=()=>{
        const $verify = this.refs.verify 
        $verify.reset()
        this.setState({
          isPass: false
        })
    }
    render() {
        return (
            <div>
            	{/* react滑块组件 */}
                <ReactSimpleVerify ref="verify" success={ this.success.bind(this) } />
                {/* 重置按钮 */}
                <button onClick={this.reset}>reset</button>
            </div>
        )
    }
}

3、最终效果