时间戳

首页 > 解决方案 > 反应本机：当焦点放在TextInput上并且达到其限制时触发哪个函数仍然按下输入按钮

reactjs - 反应本机：当焦点放在TextInput上并且达到其限制时触发哪个函数仍然按下输入按钮

问题描述

我是反应原生的新手。我有 3 个 TextInput 字段t1, t2, t3。当达到极限时，我已经完成了对下一个输入字段的关注。现在我陷入了这样一种情况，即我的文本输入字段以某种方式受到关注t1并且t1已经达到其最大限制。但是当我按下另一个输入时，它不会专注于下一个输入字段t2。 

<TextInput
onChangeText={text => this.setState({ v1: text })}
keyboardType='number-pad'
maxLength={1}
autoCompleteType={'off'}
autoFocus={true}
ref={ref => this.v1Ref = ref}
onChange={event => {
if (event.nativeEvent.text !== '') {
  this.v2Ref.focus();
}
}}
/>

<TextInput
onChangeText={text => this.setState({ v2: text })}
keyboardType='number-pad'
maxLength={1}
autoCompleteType={'off'}
ref={ref => this.v2Ref = ref}
onChange={event => {
if (event.nativeEvent.text !== '') {
  this.v3Ref.focus();
}
}}
onKeyPress={({ nativeEvent }) => {
if (nativeEvent.key === 'Backspace') {
  if(this.state.v2== '')
    this.v1Ref.focus(); //here it is focusing on field t1 on backspace press and then if I am trying to give another input It's not going to t2 because t1 has reached its limit.
  }
}}
/>

标签： reactjsreact-nativereact-native-textinput

解决方案

你的代码在我的电脑上运行

如果您使用的是 Android Emulator 此功能将不起作用，因为它是在文档中编写的

注意：在 Android 上，仅处理来自软键盘的输入，而不处理硬件键盘输入。

如果您使用的是模拟器，则需要使用鼠标而不是计算机键盘来按下手机内部的按钮

尝试在函数内部插入console.log，看看它是否有效

onKeyPress={({ nativeEvent }) => {
console.log('onKeyPress')
if (nativeEvent.key === 'Backspace') {
  if(this.state.v2== '')
    this.v1Ref.focus(); 
  }
}}

推荐阅读