react实现图形验证码_在React中随机生成图形验证码

各个方法

在输入框中定义一个位置存放图形

完整代码 方便复制粘贴

import React, { Component } from 'react'; import styles from './leftLogin.scss'; import { withRouter } from 'dva/router'; import { connect } from 'dva'; import { Form, Icon, Input, Button, Checkbox } from 'antd';

@connect(({ login }) => ({ login, }))

class leftLogin extends Component { constructor(props) { super(props); this.state = { code: '', codeLength: 4, fontSizeMin: 20, fontSizeMax: 22, backgroundColorMin: 240, backgroundColorMax: 250, colorMin: 10, colorMax: 20, lineColorMin: 40, lineColorMax: 180, contentWidth: 96, contentHeight: 38, showError: false, // 默认不显示验证码的错误信息 }; }

UNSAFE_componentWillMount() { this.canvas = React.createRef(); }

componentDidMount() { this.drawPic();