React Native TextInput失焦再聚焦后maxLength属性失效问题求助

这是已知问题吗？ #

是的，这是React Native的一个已知兼容性问题，主要存在于0.6x至0.7x系列的部分版本中。问题根源在于TextInput的焦点状态切换时，原生层的输入长度限制逻辑没有被正确触发，导致重新聚焦后maxLength属性失效。

解决方案 #

以下是几个实用的解决办法，按优先级推荐：

1. 手动截断输入内容（最稳妥的兜底方案）

通过onChangeText事件手动控制输入内容的长度，完全绕过原生层可能存在的逻辑问题，同时保留maxLength作为双重保险：

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

const YourComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const MAX_INPUT_LENGTH = 10; // 你设定的最大长度

  const handleTextChange = (text) => {
    // 手动截断到指定长度
    const truncatedText = text.slice(0, MAX_INPUT_LENGTH);
    setInputValue(truncatedText);
  };

  return (
    <TextInput
      value={inputValue}
      onChangeText={handleTextChange}
      maxLength={MAX_INPUT_LENGTH}
      // 其他属性
    />
  );
};

2. 聚焦时强制修正内容

如果不想完全依赖手动截断，可以在输入框聚焦时，检查当前内容长度并强制截断，确保重新聚焦后内容符合限制：

const handleFocus = () => {
  if (inputValue.length > MAX_INPUT_LENGTH) {
    setInputValue(inputValue.slice(0, MAX_INPUT_LENGTH));
  }
};

// 在TextInput中添加onFocus属性
<TextInput
  value={inputValue}
  onChangeText={handleTextChange}
  maxLength={MAX_INPUT_LENGTH}
  onFocus={handleFocus}
/>

3. 升级React Native版本

如果项目允许，升级到0.72及以上的稳定版本，官方在后续版本中修复了多个TextInput焦点与长度限制相关的bug，能从根源解决此问题。

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