Ant Design Pro ログイン機能にグラフィック検証コード コンポーネントを統合する方法

'react' から React、{useState、useEffect} をインポートします。
'antd' から {Input, message} をインポートします。
'@ant-design/icons' から {SafetyCertificateOutlined} をインポートします。
'@/utils/api' から api をインポートします。
"@/utils/stringUtil" から stringUtil をインポートします。
「@/utils/request」からリクエストをインポートします。
"umi" から {useIntl} をインポートします。
 
 
インターフェース CaptchaInputValue {
  captchaコード?: 文字列;
  captchaKey?: 文字列;
}
 
インターフェース CaptchaInputProps {
  値?: CaptchaInputValue;
  onChange?: (値: CaptchaInputValue) => void;
}
 
/**
 * 認証コードを取得 */
const getCaptcha = 非同期() => {
  試す {
    const データ = リクエストを待機します (api.captcha);
    (データコード === 1)の場合{
      data.data を返します。
    }
  } キャッチ（エラー）{
    message.error('部門ツリーを取得できませんでした。もう一度お試しください');
    戻る [];
  }
  message.error('部門ツリーを取得できませんでした。もう一度お試しください');
  戻る [];
}
 
const CaptchaInput: React.FC<CaptchaInputProps> = ({value = {}, onChange}) => {
 
  定数 intl = useIntl();
  const [captchaCode、setCaptchaCode] = useState<文字列>('');
  const [captchaKey、setCaptchaKey] = useState<文字列>('');
  const [imageData, setImageData] = useState<string>('');
 
  // トリガーの変更 const triggerChange = (changedValue: { captchaCode?: string; captchaKey?: string }) => {
    変更があった場合
      onChange({captchaCode、captchaKey、...値、...変更された値});
    }
  };
 
  使用効果(() => {
    getCaptcha().then((データ: any) => {
      キャプチャキーを設定します。
      画像データを設定します。
      トリガーの変更({captchaKey: data.captchaKey});
    })
  }, []);
 
 
  // 入力ボックスの変更 const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const コード = e.target.value || '';
    （stringUtil.isNotEmpty（コード））の場合{
      CaptchaCodeを設定します(コード)。
    }
    トリガー変更({captchaCode: コード});
  }
 
  // 時間型の変更 const onClickImage = () => {
    getCaptcha().then((データ: any) => {
      キャプチャキーを設定します。
      画像データを設定します。
      トリガーの変更({captchaKey: data.captchaKey});
    })
  };
 
  戻る （
    <span>
       <Input.Group コンパクト>
          <Input prefix={<SafetyCertificateOutlined style={{color: "#319cff"}}/>} placeholder={intl.formatMessage({
            id: 'pages.login.captcha.placeholder',
            defaultMessage: '認証コードを入力してください',
          })}
                 onChange={onChangeInput}
                 スタイル={{幅: '75%', マージン右: 5, パディング: '6.5px 11px 6.5px 11px', 垂直配置: 'middle'}}/>
                   <img style={{幅: '23%', 高さ: '35px', 垂直配置: 'middle', パディング: '0px 0px 0px 0px'}}
                        src={imageData} onClick={onClickImage}/>
       </Input.Group>
    </span>
  );
};
デフォルトの CaptchaInput をエクスポートします。

'./components/CaptchaInput' から CaptchaInput をインポートします。
 
…… 
 
  const handleSubmit = (値: LoginParamsType) => {
    const { ディスパッチ } = props;
    values.client_id = "hanxiaozhang";
    values.client_secret = "hanxiaozhang";
    values.scope = "hanxiaozhang";
    values.grant_type = "パスワード";
    値.captcha_key = 値.captchaComp.captchaKey;
    値.captcha_code = 値.captchaComp.captchaCode;
    values.captchaComp を削除します。
    急送（{
      タイプ: 'ログイン/ログイン'、
      ペイロード: {...値、タイプ},
    });
  };
 
…… 
 
            <Form.Item name="captchaComp" ルール={[{
              検証トリガー: 'onBlur'、
              バリデータ: async (ルール, 値) => {
                // console.log(ルール)
                （文字列ユーティリティが空の場合（値キャプチャコード））{
                  throw new Error('確認コードを入力してください!');
                }
              }
            },]}>
              <キャプチャ入力/>
            </フォーム.アイテム>
 
……