import React, { useCallback, useRef } from 'react';
import Captcha from 'react18-verify-code';

export default { title: 'Uncontrolled' };

export const Uncontrolled = () => {
  const handleChange = useCallback((captcha: any) => {
    console.log('captcha:', captcha);
  }, []);

  const captchaRef = useRef<any>();

  const handleClick = () => {
    // 刷新验证码
    (captchaRef as any).current.refresh();
  };

  return (
    <>
       <h2>非受控组件</h2>
      <Captcha ref={captchaRef} charNum={6} onChange={handleChange} />
      <div>
        <button onClick={handleClick}>更换验证码</button>
      </div>
    </>
  );
};

Uncontrolled.story = {
  name: 'Uncontrolled',
};