在这个前端不懂 React 就会被误解成 low B 的时代，也只能苦逼的去学习一下咯。 没有学习过的可以转到React官网或者React中文网。由于笔者也是没有学几天的初级选手，若有瞎说的地方，忘斧正！
所有依赖包都是通过Gulp管理，就不再赘述了。了解gulp请移步gulp 中文网。除此之外，为了减少工作量以及验证反馈的美观，引入了一个amazeui的Input组件
首先引入自己依赖包
'use strict';
var React = require('react');
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 并初始化，在这里有三个状态会发生变化，即验证码内容，验证码结果（结果和内容好像是一起变的😂），用户输入。
getInitialState: function(){
return {
expression: '',
validate: '',
validateInput: ''
};
},
expression： 表示验证码的内容（可能是如：“21-9”）;
validate: 表示验证码结果（如“12”）；
validateInput： 表示用户输入的结果；
做到这一步了，就要开始想如何得到这个 states 了，那么就要开始自定义一个生成验证码的方法如下：（纯属自己瞎写）
renderCode: function() {
//定义expression和result，expression是字符串，result可能是字符串也可能是数字
var expression = '', result;
//判断验证码类型
if (this.props.captchaType == 'Calculation') {
result = 0;//计算类型则result为数字，初始化为0
//获取随机的两个两位数
var Calpre = Math.round(Math.random()*100);
var Calafter = Math.round(Math.random()*100);
var codeCal = ['-','+','x'];//运算符
var i = Math.round(Math.random()*2);//获得随机运算符
switch (codeCal[i]) {//判断运算符并计算
case '-':
expression = Calpre + '-' + Calafter;
result = Calpre - Calafter;
break;
case '+':
expression = Calpre + '+' + Calafter;
result = Calpre + Calafter;
break;
case 'x':
expression = Calpre + 'x' + Calafter;
result = Calpre * Calafter;
break;
}
} else if (this.props.captchaType == 'Normal'){
result = '';
var codeNormal = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';//字母库
for (var i =0; i < this.porps.size; i ++) {
result = result + codeNormal[Math.round(Math.random()*(codeNormal.length-1))];
}//随机获取字母四个
expression = result.toLowerCase();//忽略大小写
}
this.setState({//设置更新状态
expression: expression,
validate: result
});
},
这样设置玩了基本上就可以渲染组件了，但是使用会发现刚进来的时候验证码生成方法 即 renderCode 也没有触发，state并没有发生改变，默认expression为空，显示不出来验证码。
这里我在组件初始化渲染之后（即componentDidMount）手动触发一次。
componentDidMount: function() {
this.renderCode();
},
验证码的生成做完了，接下来开始做用户输入和的校验。即在用户输入的时候 Input 发生改变的时候触发，setState 改变 validateInput 这个状态，重新渲染一次输入框：
handleChange: function() {
this.setState({
validateInput: this.refs.field.getValue()
});
},
同时渲染之后要给用户一个反馈，这里就用到了amazeui Input 组件的一个验证属性validation，它有三个值即success，error，warning，根据不同的值，不同的反馈，我们只需要判断一下validateInput的值和result是否相等，若相等，返回success，不相等返回error，如下：
validate: function() {
var thisInput = this.state.validateInput;
var validateCode = this.state.validate;
if (thisInput.toLowerCase() == validateCode.toString().toLowerCase()) {
return 'success';
} else if (thisInput != ''){
return 'error';
}
},
上面写完之后就可以渲染整个组件了：
render: function() {
var inlineStyle = {
color: this.props.color,
backgroundImage: 'url(' + this.props.bgImage + ')'
};
return (
<div>
<Input
value={this.state.validateInput}
placeholder="请输入验证码"
validation={this.validate()}
ref="field"
onChange={this.handleChange} hasFeedback/>
<AMR.Button style={inlineStyle}
className="am-btn"
onClick={this.renderCode}>
{this.state.expression}</AMR.Button>
</div>
);
}
module.exports = Captcha;
演示结果如下（只能上图了）：
然后一个组件就这样实现了，如果要在其他地方使用这个组件，只需要引入这个组件即可。
var Captcha = require(/dir/Captcha);
....
render: function() {
return (
<Captcha color="red" bgImage=".../xxx.png" captchaType="Calculation" size="4"/>
)
}
呃，就这样可以了。
