如何在React Web中实现React Native的autoCapitalize功能？

当然可以实现，核心思路是通过受控组件结合文本格式化逻辑，既能自动将每个单词首字母转为大写，又允许用户手动修改任意字符的大小写。以下是具体实现方案：

实现步骤与代码示例 #

使用React的受控组件模式，配合正则表达式处理文本，并处理光标位置以保证输入体验：

import { useState, useRef } from 'react';

function CapitalizeInput() {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);

  const handleChange = (e) => {
    const inputValue = e.target.value;
    // 将每个单词的首字母转为大写，其余字符保留用户输入的原样
    const capitalizedValue = inputValue.replace(/\b\w/g, char => char.toUpperCase());
    
    // 记录当前光标位置，避免格式化后光标跳转到末尾
    const cursorPosition = e.target.selectionStart;
    setValue(capitalizedValue);
    
    // 异步重置光标位置，确保DOM更新后生效
    setTimeout(() => {
      inputRef.current?.setSelectionRange(cursorPosition, cursorPosition);
    }, 0);
  };

  return (
    <input
      ref={inputRef}
      type="text"
      value={value}
      onChange={handleChange}
      placeholder="输入内容，自动首字母大写"
    />
  );
}

export default CapitalizeInput;

关键细节说明 #

• 文本格式化逻辑：正则表达式\b\w会匹配每个单词的第一个字符，将其转为大写，其余字符完全保留用户输入的状态（包括手动修改的小写首字母）。
• 光标位置处理：由于React的state更新是异步的，通过setTimeout延迟设置光标位置，保证DOM更新后光标回到用户输入的位置，避免输入体验被打断。
• 受控组件特性：通过value和onChange绑定状态，既实现自动格式化，又允许用户自由修改任意字符，完全符合需求。

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