相关疑难解决方法(0)

如何在react-native上自动对焦下一个TextInput

我正在尝试创建一个受密码保护的屏幕.屏幕将使用4个数字输入作为密码.

我这样做的方法是创建一个TextInput组件,并在我的主屏幕中调用它4次.

我遇到的问题是当我键入前一个TextInput的值时,TextInputs不会关注下一个.

我正在为所有PasscodeTextInput组件使用refs(我已被告知这是一种遗留方法,但我不知道其他任何方式,唉).

试过这个方法(没有创建我自己的组件),也没有运气. 方法

图片

index.ios.js

import React, { Component } from 'react';
import { AppRegistry, TextInput, View, Text } from 'react-native';
import { PasscodeTextInput } from './common';

export default class ProgressBar extends Component {
  render() {
    const { centerEverything, container, passcodeContainer,  textInputStyle} = styles;
    return (
      <View style={[centerEverything, container]}>
        <View style={[passcodeContainer]}>
          <PasscodeTextInput
            autoFocus={true}
            ref="passcode1"
            onSubmitEditing={(event) => { this.refs.passcode2.focus() }} />
          <PasscodeTextInput
            ref="passcode2"
            onSubmitEditing={(event) => { this.refs.passcode3.focus() }} />
          <PasscodeTextInput
            ref="passcode3"
            onSubmitEditing={(event) => { this.refs.passcode4.focus() }}/>
          <PasscodeTextInput
            ref="passcode4" /> …
Run Code Online (Sandbox Code Playgroud)

javascript facebook textinput react-native

7
推荐指数
3
解决办法
2万
查看次数

标签 统计

facebook ×1

javascript ×1

react-native ×1

textinput ×1