React使用luosimao人机验证组件

React使用luosimao人机验证组件

实现效果

import React from 'react';

class DragCaptcha extends React.Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }
  componentDidMount(){
  //每次组件加载都重新加载luosimao的js，使组件重新渲染。
    let dom = document.getElementById("luosimao");
    if(dom){
    //避免加载多次出现无数的script标签。
      dom.parentNode.removeChild(dom);
    }
    var c = document.createElement('script');c.type = 'text/javascript';c.async = true;c.id="luosimao"
    c.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'captcha.luosimao.com/static/dist/captcha.js?v=201805071004';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(c, s);
  }
  render(){
  //luosimao的回调，触发上层组件方法
    window.getResponse = (resp)=>{
      this.props.onChange(result);
    }
    return (
      <div>
        <div  className="l-captcha" data-site-key="" data-callback='getResponse'></div>
      </div>
    );
  }
}

export default DragCaptcha;