React 邮箱/文本输入框光标异常问题及组件选型咨询

问题原因 #

切换input的type属性时，React会触发组件重渲染，而react-bootstrap4-form-validation的TextInput组件内部逻辑会强制重新聚焦并重置光标位置，导致光标跳转到输入框开头。

修复现有组件的方案 #

可以通过手动保存并恢复光标位置解决该问题，具体实现如下：

• 用useRef获取输入框DOM元素
• 在输入变化时记录当前光标位置
• 监听inputType变化，在组件更新后恢复光标位置

修改后的代码示例：

import { TextInput } from 'react-bootstrap4-form-validation';
import { useState, useRef, useEffect } from 'react';
import validator from 'validator';

// ...其他业务代码
const [inputType, setInputType] = useState("text");
const [searchFor, setSearchFor] = useState("");
const inputRef = useRef(null);
const [cursorPos, setCursorPos] = useState(0);

const onSearchChange = (e) => {
  const value = e.target.value;
  setSearchFor(value);
  // 记录当前光标位置
  setCursorPos(e.target.selectionStart);
  // 根据输入内容切换类型
  setInputType(value.includes("@") ? "email" : "text");
};

// 类型切换后恢复光标位置
useEffect(() => {
  if (inputRef.current) {
    inputRef.current.setSelectionRange(cursorPos, cursorPos);
  }
}, [inputType, cursorPos]);

return (
  <>
    <TextInput
      ref={inputRef}
      key="editor1"
      name={inputType}
      id="input-with-icon-grid"
      type={inputType}
      placeholder="Email / ID /"
      required
      validator={() => inputType === "email" ? validator.isEmail : true}
      autoComplete="false"
      errorMessage={{ validator: "Please enter a valid email" }}
      value={searchFor}
      onChange={(e) => onSearchChange(e)}
    />
  </>
);

更合适的替代组件推荐 #

如果不想折腾现有组件的限制，可以考虑以下灵活度更高的方案：

1. 原生Input + 自定义验证
   直接使用原生<input>标签，自己处理验证和类型切换，完全控制光标行为，没有第三方组件的额外逻辑干扰。示例：

import { useState, useRef, useEffect } from 'react';
import validator from 'validator';

// ...
const [inputType, setInputType] = useState("text");
const [searchFor, setSearchFor] = useState("");
const [isValid, setIsValid] = useState(true);
const inputRef = useRef(null);
const [cursorPos, setCursorPos] = useState(0);

const handleChange = (e) => {
  const value = e.target.value;
  setSearchFor(value);
  setCursorPos(e.target.selectionStart);
  const newType = value.includes("@") ? "email" : "text";
  setInputType(newType);
  
  // 自定义邮箱验证
  if (newType === "email") {
    setIsValid(validator.isEmail(value));
  } else {
    setIsValid(true);
  }
};

useEffect(() => {
  if (inputRef.current) {
    inputRef.current.setSelectionRange(cursorPos, cursorPos);
  }
}, [inputType, cursorPos]);

return (
  <div>
    <input
      ref={inputRef}
      type={inputType}
      value={searchFor}
      onChange={handleChange}
      placeholder="Email / ID /"
      style={{ border: !isValid ? '1px solid red' : '' }}
    />
    {!isValid && <span style={{ color: 'red' }}>Please enter a valid email</span>}
  </div>
);

2. react-hook-form
   轻量专注的表单处理库，结合原生input使用，可轻松实现输入类型切换和验证逻辑，同时能完全控制光标行为，避免跳转问题。

3. Formik + Yup
   Formik负责表单状态管理，Yup负责验证规则定义，两者结合既能快速构建复杂表单，又能保留对input元素的完全控制权，解决光标跳转问题更简单。

内容的提问来源于stack exchange，提问作者L_Fr