1.0.3

Author: javaLuo

example/src/index.js

@@ -11,6 +11,7 @@ class Test extends React.Component {
       input2: '', // 第2个input的值
       vcode2: '-1', // 第2个vcode的值
       code: '',
+      width: 200,
     };
   }
 
@@ -22,22 +23,28 @@ class Test extends React.Component {
 
   onVcode2Change(v) {
     console.log('触发回调onChange', v);
-    this.setState({
-      vcode2: v,
-    });
+    if(v){
+      this.setState({
+        vcode2: v,
+      });
+    }
   }
 
   onChangeImg() {
+    const imgindex = this.state.img === 1 ? 2 : 1;
     this.setState({
-      img: this.state.img === 1 ? 2 : 1,
+      img: imgindex,
+      code: imgindex === 1 ? ImgTest1 : ImgTest2,
+      vcode2: '1234'
     });
   }
   onChangeStr() {
     const a = ['a', 'b', 'c', 'd'];
     const d = [];
     for (let i = 0; i < 5; i++) {
-      d.push(Math.round(Math.random() * 3));
+      d.push(a[Math.round(Math.random() * 3)]);
     }
+    console.log('code:', d);
     this.setState({
       code: d.join(''),
     });
@@ -46,17 +53,25 @@ class Test extends React.Component {
   onVcodeClick() {
     this.onChangeStr();
   }
+  onChangeWidth(){
+    const l = Math.round(Math.random() * 800 + 400);
+    console.log('改变width:', l);
+    this.setState({
+      width: l
+    });
+  }
   render() {
     return (
       <div>
         <div>
           <input type="text" placeholder="请输入正确的验证码" value={this.state.input2} onChange={e => this.onInput2Change(e)} maxLength={20} />
-          <Vcode />
+          <Vcode onChange={(v)=>this.onVcode2Change(v)} value={this.state.code} width={this.state.width}/>
           <span>{this.state.input2 === this.state.vcode2 ? '输入正确' : '输入错误'}</span>
         </div>
         <hr />
         <button onClick={() => this.onChangeImg()}>更换图片</button>
         <button onClick={() => this.onChangeStr()}>外部生成随机字符串</button>
+        <button onClick={() => this.onChangeWidth()}>改变width</button>
       </div>
     );
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-vcode",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "a react verification code component",
   "main": "dist/index.js",
   "scripts": {

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-// equire('es6-object-assign').polyfill();
-class Vcode extends React.Component {
+require('es6-object-assign').polyfill();
+class Vcode extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -114,25 +114,27 @@ class Vcode extends React.Component {
   }
 
   /** 组件参数改变 **/
-  UNSAFE_componentWillReceiveProps(nextP, nextS) {
-    if (this.props.value !== nextP.value) {
-      this.onDraw(nextP.value);
+  componentDidUpdate(prevP){
+    if (this.props.value !== prevP.value) {
+      this.onDraw(this.props.value);
     }
-    if (this.props.width !== nextP.width || this.props.height !== nextP.height) {
+    if (this.props.width !== prevP.width || this.props.height !== prevP.height || this.props.style !== prevP.style) {
       this.setState({
-        width: nextP.width,
-        height: nextP.height,
+        width: this.props.width || 150,
+        height: this.props.height || 40,
+        style: Object.assign({},this.state.style, {
+          width: this.props.width ? `${this.props.width}px` : '150px',
+          height: this.props.height ? `${this.props.height}px` : '40px',
+        })
       });
     }
   }
 
-  /** 用户点击的验证码图片 **/
+  /** 用户点击了验证码图片 **/
   onClick() {
-    const div = document.getElementById(this.state.id);
-    // 如果this.props.value有值，表明值是外部受控，这个地方不需要重新渲染
-    let code = null;
+    // 如果用户没有设置值，就直接重新生成
     if (!this.props.value) {
-      code = this.onDraw(this.props.value);
+      this.onDraw(this.props.value);
     }
     this.props.onClick && this.props.onClick(); // 触发外部的onClick,什么都不返回
   }