时间戳

首页 > 解决方案 > 无论文本更改如何，如何读取 TextInput 上的每个按键

react-native - 无论文本更改如何，如何读取 TextInput 上的每个按键

问题描述

假设我有一个TextInput组件，maxLength={1}并且我输入了一个数字（比如“1”）。现在 TextInput 已填充，不再接受任何输入。

<TextInput maxLength={1} keyboardType='numeric' />

此时，我仍然想找出用户在键盘上按的是什么。假设用户正在尝试按“2”，但我无法在 Android 上识别。该功能在onChangeText这里onKeyPress不起作用。因为onChangeText仅在 TextInput 值更改时才被调用，并且onKeyPress仅注册诸如退格键之类的键，输入而不是诸如 1、2 之类的数字键。我猜onKeyPress在 iOS 上注册了所有键，但在 Android 上没有注册。

当 TextInput 值没有改变时，有什么方法可以知道用户在键盘上按什么？

我在以下版本 -

标签： react-native

解决方案

我认为这应该可以通过一些巧妙的编码来实现。

  1. 删除 maxLength，因为这将注册所有更改，例如：'12345'

  2. 在句柄内部设置两个变量的状态。

例如：如果用户输入 12345，则将 value 设置为 1，将其他变量设置为 e.target.value。

this.state = {
 value: '',
 watch: '',
}

handleTextChange = (e) => {
 const { value } = e.target

 this.setState(prevState => {
  ...prevState,
  watch: value,
  value: value.toString().length = 1,
 })
}

这种方法应该适合您的要求。

推荐阅读