React Native中TextInput转大写时删除文本出现重复问题求助

问题原因 #

你遇到的重复问题，本质是受控组件的状态同步冲突：每次输入时，你把转大写后的文本设为value，但删除操作时，TextInput的光标位置没有和更新后的文本同步，导致输入框内部的临时状态和你维护的name state不一致，最终出现重复内容。

修复方案（推荐两种） #

方案1：用样式实现显示大写（最简单）

直接通过textTransform样式让输入框显示大写，实际state存储用户原输入，需要提交或使用时再转大写。这种方式完全避开光标同步问题：

<TextInput
  placeholderTextColor="gray"
  value={name}
  onChangeText={(text) => setName(text)}
  selectionColor="orange"
  autoCapitalize='none'
  autoCorrect={false}
  selectTextOnFocus={false}
  style={{ textTransform: 'uppercase' }}
/>

// 提交时转大写示例：
// const submit = () => {
// const upperName = name.toUpperCase();
// // 后续逻辑
// }

方案2：手动同步光标位置（需存大写state时用）

如果必须在state里存储大写文本，需要跟踪光标位置，更新state后手动修正光标，避免重复：

import { useRef, useState } from 'react';
import { TextInput } from 'react-native';

// 组件内部代码
const [name, setName] = useState('');
const inputRef = useRef(null);
const [selection, setSelection] = useState({ start: 0, end: 0 });

const handleChangeText = (text) => {
  const upperText = text.toUpperCase();
  let newSelection = { ...selection };
  
  // 判断是删除操作，调整光标位置
  if (text.length < name.length) {
    newSelection.start = Math.max(0, selection.start - 1);
    newSelection.end = newSelection.start;
  } else {
    // 输入操作，光标右移
    newSelection.start = selection.start + 1;
    newSelection.end = newSelection.start;
  }

  setName(upperText);
  // 延迟设置光标，确保输入框完成重新渲染
  setTimeout(() => {
    inputRef.current?.setSelection(newSelection);
  }, 0);
};

return (
  <TextInput
    ref={inputRef}
    placeholderTextColor="gray"
    value={name}
    onChangeText={handleChangeText}
    onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
    selectionColor="orange"
    autoCapitalize='none'
    autoCorrect={false}
    selectTextOnFocus={false}
  />
);

总结 #

优先选方案1，代码简洁且无潜在问题；方案2适合必须在state中存储大写文本的场景，但需要额外处理光标逻辑。

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