The target

Ability to use Redux to send a request for a captcha

steps

  1. Import the action that gets the verification code in the Login component
  2. Distribute the captcha action in the Captcha event
  3. Create and export the action to get the verification code in the Login Action
  4. Send a request to obtain the verification code

How do I get a Form instance

const [form] = Form.useForm() 
<Form form={form} ></Form>
Copy the code

How do I get data for form-specified fields

// Get mobile number const mobile = form.getFieldValue('mobile')Copy the code

How to proactively check

Const hasError = form.getFielderror ('mobile').length > 0Copy the code

Landing Code:

Pages/Login/index. In the TSX:

const onSend = async() = > {// 1. Verify the form element - mobile phone number format
    if (form.getFieldError('mobile').length > 0) {
      // Let the text box where the mobile phone number is located automatically get focusrefInput.current! .focus()return
    }
    // 2. Get the value of the form element
    const mobile = form.getFieldValue('mobile')
    console.log('mobile', mobile)

    // Call the interface to send the verification code to mobile
    try {
      await dispatch(getCode(mobile))
      Toast.show({ content: 'SMS sent'})}catch (e) {
      const error = e as AxiosError<{ message: string }>
      Toast.show({ content: error.response? .data.message }) } }Copy the code

The actions/login. In the ts:

Export const getCode = (mobile: String) => {return async () => {await request.get(' /codes/${mobile} ') //Copy the code