React Google Recaptcha

Question

使用React Google Recaptcha npm包(https://www.npmjs.com/package/react-google-recaptcha)，可以很好地将验证码显示在屏幕上。

我想知道有没有办法让这个验证码不可操作/禁用？我们的目标是只有在某些条件匹配时才启用它。

请分享一些技巧/建议。谢谢!

以下是代码片段：

 import Recaptcha from "react-google-recaptcha";
 <Recaptcha sitekey='#' onChange={enableStuff} />

Answer 1

遗憾的是，一旦呈现了reCAPTCHA小部件，就不能禁用与它的交互。

您所能做的就是在某些条件匹配时呈现小部件。例如：

​

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ready: false
    }
  }
  
  onChange = (e) => {
    this.setState({ ready: e.target.checked });
  }
  
  render() {
    return(
      <div>
        <input type="checkbox" onChange={this.onChange} />
        {this.state.ready && 
          <Reaptcha sitekey="YOUR_KEY" onVerify={() => {}} />
        }
      </div>
    )
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reaptcha@1.1.0-beta.1"></script>

<div id="app"></div>

​

使用的库是https://github.com/sarneeh/reaptcha