React Native TextInput maxLength 重新聚焦后不起作用

Question

我遇到了 React Native 的 TextInput 组件中 maxLength 属性的问题。

当我第一次聚焦并输入输入内容时，maxLength 限制效果非常好。但是，一旦我将焦点切换到另一个输入或模糊当前输入，然后重新聚焦于原始输入，则 maxLength 不再适用，从而允许用户输入超出定义的限制。

以下是问题摘要：

当我第一次点击 TextInput 进行聚焦时，maxLength 属性按预期工作。 将焦点切换到另一个输入（或简单地模糊并重新聚焦）后，maxLength 不再限制输入。 这是 React Native 的已知问题，还是有解决方法来确保 maxLength 始终适用，即使在重新聚焦之后也是如此？

任何指导或解决方案将不胜感激！

Answer 1

您可以通过向 TextInput 添加 onFocus 处理程序来实现此目的，确保当输入重新获得焦点时再次强制执行该属性。

<TextInput
  value={yourValue}
  onChangeText={(text) => {
    if (text.length <= maxLength) {
      setYourValue(text);
    }
  }}
  onFocus={() => {
   // Reapply the maxLength here if needed
    setMaxLengthState(maxLength);
  }}
  maxLength={maxLengthState}
/>