计算机知识

当前位置:澳门新葡萄京 > 计算机知识 > 没有学习过的可以转到React官网或者React中文网

没有学习过的可以转到React官网或者React中文网

来源:http://www.hhmtch.com 作者:澳门新葡萄京 时间:2020-03-30 13:57

在这个前端不懂 React 就会被误解成 low B 的时代,也只能苦逼的去学习一下咯。 没有学习过的可以转到React官网或者React中文网。由于笔者也是没有学几天的初级选手,若有瞎说的地方,忘斧正!

所有依赖包都是通过Gulp管理,就不再赘述了。了解gulp请移步gulp 中文网。除此之外,为了减少工作量以及验证反馈的美观,引入了一个amazeui的Input组件

首先引入自己依赖包

'use strict';var React = require;var AMR = require('amazeui-react');var Input = AMR.Input;

然后开始写自己的验证组件,我给他取名为 Captcha :

var Captcha = React.createClass({ propTypes: { bgImage: React.PropTypes.string, size: React.PropTypes.number, captchaType: React.PropTypes.oneOf(['Calculation', 'Normal']), color: React.PropTypes.string },

通过 PropTypes 来指定并验证 Captcha 组件的属性;在这里我规定了四个属性,都是不必须的(not required)。

bgImage:表示验证码的背景图片。size:表示验证码的长度(只在Normal下有效)。captchaType:表示验证类型,我这里写了两种,一个字符串,一个简单计算。color: 表示验证码字母的颜色。

然后开始初始化一部分属性:

getDefaultProps: function() { return { size: 4, captchaType: 'Normal' };},

同时设置 states 并初始化,在这里有三个状态会发生变化,即验证码内容,验证码结果(结果和内容好像是一起变的

本文由澳门新葡萄京发布于计算机知识,转载请注明出处:没有学习过的可以转到React官网或者React中文网

关键词: 验证码 组件 React