React实现移动端输入短信验证码页面

1 效果

大致的功能有：

• 进入页面自动发送验证码
• 验证码输入完成后，触发验证码校验
• 可以手动输入或者删除验证码

效果图如下：

2 输入框实现

验证码输入框部分，主要使用一个input加6个div来展示，在页面上需要将input隐藏掉，6个div显示输入框中的验证码数字，基本实现如下：

import React, { useState, useEffect, useRef } from "react";
import "./index.css";

const CodeInput = (props) => {
  /**
   * vertifyCode：验证码
   * onChange：验证码改变的回调
   * onComplete：验证码输入完成后的回调
   */
  const { vertifyCode = "", onChange, onComplete } = props;

  const [codeArray, setCodeArray] = useState([]); // 用来存放验证码的数组
  const [isFocus, setIsFocus] = useState(false); // 判断是否获取焦点

  const inputList = [...Array(6)].map((item, index) => index); // 生成模拟输入框数组[0,1,2,3,4,5]

  const inputRef = useRef(null); // 绑定input输入框

  // 获取焦点事件
  const handleInputFocus = () => {
    inputRef.current?.focus(); // 为输入框聚焦
    setIsFocus(true);
  };

  // 获取验证码
  useEffect(() => {
    setCodeArray(vertifyCode.split(""));
  }, [vertifyCode]);

  // 当验证码6位时，触发完成事件，校验验证码
  useEffect(() => {
    if (vertifyCode.length !== 6) return; // 验证码不足6位，不触发校验事件
    onComplete && onComplete(vertifyCode);
  }, [vertifyCode, onComplete]);

  // 验证码改变事件
  const handleChange = (e) => {
    if (e.target.value) {
      // 获取当前输入的数字
      let val = e.target.value.replace(/[^\d]/g, ""); // 只保留数字
      onChange?.(val);
    } else {
      onChange?.("");
    }
  };

  // 失去焦点
  const handleBlur = () => {
    setIsFocus(false);
  };

  // 获取焦点
  const handleFocus = () => {
    setIsFocus(true);
  };

  // 默认聚焦input输入框，每次进入都执行
  useEffect(() => {
    handleInputFocus();
  });

  return (
    <div className="code-input-container" onClick={handleInputFocus}>
      {/* 验证码数字显示部分 */}
      <div className="number-box">
        {inputList.map((item, index) => {
          return (
            <div
              className="input-item"
              key={index}
              style={{
                // 当验证码的长度等于item时，表示当前正在等待下一位的输入，输入框变色
                border: `1px solid ${
                  item === codeArray.length && isFocus ? "orange" : "#D9D9D9"
                }`,
              }}
            >
              {codeArray[item]}
            </div>
          );
        })}
      </div>
      {/* 输入框，用样式隐藏不显示 */}
      <input
        type="number" // 数字类型输入框
        inputMode="numeric" // 可以弹起数字键盘
        maxLength={6} // 最大长度是6
        className="input-value"
        value={vertifyCode} // value值为输入的验证码
        ref={inputRef}
        onChange={handleChange} // 验证码改变事件
        onBlur={handleBlur} // 失去焦点事件
        onFocus={handleFocus} // 聚焦事件
      />
    </div>
  );
};

export default CodeInput;

基本样式如下：

/* 验证码显示框 */
.number-box {
  display: flex;
  justify-content: space-between;
}

/* 每一个验证码输入框的样式 */
.input-item {
  margin-right: 15px;
  width: 43px;
  height: 45px;
  display: flex;
  justify-content: center;
  color: #141414;
  font-size: 24px;
  line-height: 45px;
  font-weight: 500;
}

/* 最后一个验证码输入框margin-right为0 */
.input-item:last-child {
  margin-right: 0px;
}

/* 将input输入框隐藏看不见 */
.input-value {
  margin-left: -750px;
  position: absolute;
  z-index: -99;
  opacity: 0;
}

3 整体实现

在整体页面部分中，需要使用useState来存放输入的验证码，并传给验证码输入框，基本代码如下：

import React, { useState, useEffect } from "react";
import CodeInput from "./CodeInput"; // 导入验证码输入框
import "./index.css";

const VertificationCode = () => {
  const [vertifyCode, setVertifyCode] = useState(""); // 保存当前输入的验证码

  // 验证码改变事件
  const handleChange = (vertifyCode) => {
    console.log("当前输入了：", vertifyCode);
    setVertifyCode(vertifyCode); // 更新验证码
  };

  // 验证码输入完成后进行校验
  const handleComplete = (vertifyCode) => {
    // 验证码输入后验证逻辑
    console.log("验证码输入完毕", vertifyCode);
  };

  // 请求发送验证码
  const sendVertifyCode = () => {
    // 发送验证码的逻辑
    console.log("验证码已发送");
  };

  // 重新发送方法
  const handleSend = () => {
    // 重发验证码逻辑，一般情况为：60s倒计时后重新可以再次发送
  };

  useEffect(() => {
    // 刚进入页面时，发送验证码
    sendVertifyCode();
  }, []);

  return (
    <div className="root">
      <div className="title">输入验证码</div>
      <div className="sub-title-container">
        <div className="sub-title">已发送验证码至</div>
        <span className="phone-number">+86 123****0000</span>
      </div>
      <div className="code">
        <CodeInput
          vertifyCode={vertifyCode}
          onChange={handleChange}
          onComplete={handleComplete}
        />
      </div>
      <div className="send-btn" onClick={handleSend}>
        重新发送
      </div>
    </div>
  );
};

export default VertificationCode;

基本样式如下：

/* 整体容器样式 */
.root {
  width: 100%;
}

/* 标题 输入验证码 */
.title {
  font-size: 24px;
  margin: 60px 20px 0;
  color: #141414;
  font-weight: 500;
  line-height: 32px;
}

/* 描述 已发送验证码至XXX */
.sub-title-container {
  margin: 10px 20px 0;
  font-size: 14px;
  line-height: 17px;
}

/* 联系方式 */
.phone-number {
  color: #141414;
  letter-spacing: 0;
}

/* 已发送验证码 */
.sub-title {
  display: inline-block;
  color: #83898f;
  letter-spacing: 0;
  margin-right: 4px;
}

/* 验证码输入部分 */
.code {
  height: 45px;
  margin: 40px 20px 0;
}

/* 重新发送 */
.send-btn {
  width: 116px;
  height: 20px;
  color: orange;
  font-weight: 500;
  margin: 20px;
  font-size: 16px;
  line-height: 20px;
}