描述
当状态更新后更改值时，TextInput的maxLength功能不起作用。它在用键盘输入时按预期工作。<TextInput style={styles.textInput} value={description} maxLength={10} onChangeText={text => setDescription(text)} />
重现步骤
- 将TextInput的
maxLength设置为任何非零数字 - 在状态中存储任何文本
- 将状态中存储的文本用作TextInput的值
- 使用大于
maxLength的文本长度更新状态 - TextInput将具有大于给定
maxLength的文本长度
React Native版本
0.74.2
受影响平台
运行时 - iOS
npx react-native info的输出
System:
OS: macOS 13.5.1
CPU: (10) arm64 Apple M1 Max
Memory: 73.36 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.12.0
path: ~/.nvm/versions/node/v18.12.0/bin/node
Yarn:
version: 3.6.4
path: /opt/homebrew/bin/yarn
npm:
version: 8.19.2
path: ~/.nvm/versions/node/v18.12.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.14.3
path: /Users/kunal.chavhan/.rvm/gems/ruby-3.2.2/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: Jellyfish 2023.3.1 Patch 2 Jellyfish 2023.3.1 Patch 2
Xcode:
version: 15.0/15A240d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /usr/bin/javac
Ruby:
version: 3.2.2
path: /Users/kunal.chavhan/.rvm/rubies/ruby-3.2.2/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.74.2
wanted: 0.74.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false堆栈跟踪或日志
NA可复现代码
https://github.com/kunalchavhan/rn-textinput-maxlength-reproducer
截图和视频
maxlength-reproducer-1.mov
5条答案
按热度按时间omjgkv6w1#
我正在调试这个，发现每当文本从react的状态更改中更新时，这个方法都会被调用。然后这个方法会调用
setAttributedString,接着设置文本。在这里我没有找到任何检查maxLength属性的地方。当从键盘接收到输入时，会调用这个方法，它有
maxLength属性的检查。这里为什么不检查maxLength属性呢？5f0d552i2#
@sammy-SC,请问您能查看一下这个问题吗？感谢您的时间。
mzsu5hc03#
我正在调试这个，发现每当文本从React的状态更改中更新时，这个方法就会被调用。然后这个方法会调用
setAttributedString,它会设置文本。我在这里找不到任何关于maxLength属性的检查。当从键盘接收到输入时，这个方法会被调用，它有一个
maxLength属性检查。这里为什么不检查maxLength属性呢？你链接的代码是针对the new architecture的，但你的复现是在旧架构上进行的。对于旧架构，maxLength在这里处理。当更新来自React时，似乎没有考虑到maxLength。
这可能会让人烦恼，但如果这阻止了你，这里有一个简单的解决方法。当你从React设置文本时，你可以检查新文本值的长度，如果超过maxLength就缩短它。
maxLength对于来自原生的TextInput更新非常重要，因为在那里你的JavaScript代码没有机会运行。多亏了maxLength属性，你有机会阻止iOS用比maxLength长的值来绘制TextInput。
7rtdyuoh4#
你正在链接的代码是针对 the new architecture 的，但你的复现是在旧架构上进行的。对于旧架构，maxLength 在这里处理。当更新来自 React 时，似乎没有考虑到 maxLength。
这可能会让人烦恼，但如果这阻碍了你，有一个简单的解决方法。当从 React 设置文本时，你可以检查新文本值的长度，如果超过 maxLength 就缩短它。maxLength 对于来自原生的 TextInput 更新非常重要，因为在那里你的 JavaScript 代码没有机会运行。多亏了 maxLength prop,你有机会阻止 iOS 用比 maxLength 更长的值绘制 TextInput。
感谢澄清，并为错误的代码链接道歉。我已经为新架构 here 推送了复现。
感谢提出解决方法。我检查过
maxLengthprop 在来自 React 的 Android 更新上是有效的。iOS 上是否也可以实现相同的行为呢？cygmwpex5#
感谢您的澄清，并为错误的代码链接道歉。我已将新的架构 here 推送到 repro。
感谢您提出的解决方法。我已经检查过
maxLength属性在从 React 更新到 Android 时是否有效。iOS 上是否也可以实现相同的行为呢？@sammy-SC 如果您同意 iOS 应该处理
maxLength在从 React 更新时的情况，我可以尝试解决这个问题吗？