React Native:如何在按下"下一个"键盘按钮后选择下一个TextInput？

Question

我定义了两个TextInput字段,如下所示:

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />

但是在按下键盘上的"下一步"按钮后,我的react-native应用程序没有跳转到第二个TextInput字段.我怎样才能做到这一点？

谢谢!

Answer 1

设置第二个TextInput焦点,以前的时候TextInput的onSubmitEditing被触发.

试试这个

1. 将Ref添加到第二个TextInput
   ref={(input) => { this.secondTextInput = input; }}

2. 将焦点函数绑定到第一个TextInput的onSubmitEditing事件.
   onSubmitEditing={() => { this.secondTextInput.focus(); }}

3. 请记住将blurOnSubmit设置为false,以防止键盘闪烁.
   blurOnSubmit={false}

完成后,它应该是这样的.

<TextInput
    placeholder = "FirstTextInput"
    returnKeyType = { "next" }
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder = "secondTextInput"
/>

Answer 2

以为我会使用功能组件分享我的解决方案......不需要'这个'！

React 16.12.0 和 React Native 0.61.5

这是我的组件的示例：

import React, { useRef } from 'react'
...


const MyFormComponent = () => {

  const ref_input2 = useRef();
  const ref_input3 = useRef();

  return (
    <>
      <TextInput
        placeholder="Input1"
        autoFocus={true}
        returnKeyType="next"
        onSubmitEditing={() => ref_input2.current.focus()}
      />
      <TextInput
        placeholder="Input2"
        returnKeyType="next"
        onSubmitEditing={() => ref_input3.current.focus()}
        ref={ref_input2}
      />
      <TextInput
        placeholder="Input3"
        ref={ref_input3}
      />
    </>
  )
}

Answer 3

你可以不使用refs来做到这一点.这种方法是首选,因为refs可能导致脆弱的代码.该阵营文档建议寻找其他解决方案,在可能的情况:

如果您还没有使用React编写多个应用程序,那么您的第一个倾向通常是尝试使用refs在您的应用程序中"让事情发生".如果是这种情况,请花一点时间,更关键地考虑组件层次结构中应该拥有状态的位置.通常,很明显,"拥有"该状态的适当位置在层次结构中处于更高级别.在那里放置状态通常消除了使用refs"让事情发生"的任何愿望 - 相反,数据流通常会实现你的目标.

相反,我们将使用状态变量来聚焦第二个输入字段.

1. 添加一个我们将作为prop传递给的状态变量DescriptionInput:

   initialState() {
     return {
       focusDescriptionInput: false,
     };
   }
   

2. 定义一个将此状态变量设置为true的处理程序方法:

   handleTitleInputSubmit() {
     this.setState(focusDescriptionInput: true);
   }
   

3. 提交/点击进入/接下来TitleInput,我们会打电话handleTitleInputSubmit.这将设置focusDescriptionInput为true.

   <TextInput 
      style = {styles.titleInput}
      returnKeyType = {"next"}
      autoFocus = {true}
      placeholder = "Title" 
      onSubmitEditing={this.handleTitleInputSubmit}
   />
   

4. DescriptionInput的focus道具设置为我们的focusDescriptionInput状态变量.因此,当focusDescriptionInput更改(在步骤3中)时,DescriptionInput将重新渲染focus={true}.

   <TextInput
      style = {styles.descriptionInput}          
      multiline = {true}
      maxLength = {200}
      placeholder = "Description" 
      focus={this.state.focusDescriptionInput}
   />
   

这是避免使用refs的好方法,因为refs会导致更脆弱的代码:)

编辑:h/t到@LaneRettig指出你需要用一些添加的道具和方法包装React Native TextInput来让它响应focus:

    // Props:
    static propTypes = { 
        focus: PropTypes.bool,
    } 

    static defaultProps = { 
        focus: false,
    } 

    // Methods:
    focus() {
        this._component.focus(); 
    } 

    componentWillReceiveProps(nextProps) {
        const {focus} = nextProps; 

        focus && this.focus(); 
    }

Answer 4

从React Native 0.36开始,focus()不再支持在文本输入节点上调用(如其他几个答案中所建议的那样).相反,您可以使用TextInputStateReact Native中的模块.我创建了以下帮助程序模块以使其更容易:

// TextInputManager
//
// Provides helper functions for managing the focus state of text
// inputs. This is a hack! You are supposed to be able to call
// "focus()" directly on TextInput nodes, but that doesn't seem
// to be working as of ReactNative 0.36
//
import { findNodeHandle } from 'react-native'
import TextInputState from 'react-native/lib/TextInputState'


export function focusTextInput(node) {
  try {
    TextInputState.focusTextInput(findNodeHandle(node))
  } catch(e) {
    console.log("Couldn't focus text input: ", e.message)
  }
}

然后,您可以focusTextInput在a的任何"ref"上调用该函数TextInput.例如:

...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...

Answer 5

我创建了一个小型库来执行此操作,除了替换包装视图和导入TextInput之外,不需要更改代码:

import { Form, TextInput } from 'react-native-autofocus'

export default () => (
  <Form>
    <TextInput placeholder="test" />
    <TextInput placeholder="test 2" />
  </Form>
)

https://github.com/zackify/react-native-autofocus

这里详细解释:https://zach.codes/autofocus-inputs-in-react-native/

Answer 6

使用react-native 0.45.1我在按用户名TextInput上的返回键后尝试将焦点设置为密码TextInput时也遇到了问题.

在这里尝试了大多数评价最高的解决方案后,我在github上找到了满足我需求的解决方案:https: //github.com/shoutem/ui/issues/44#issuecomment-290724642

把它们加起来:

import React, { Component } from 'react';
import { TextInput as RNTextInput } from 'react-native';

export default class TextInput extends Component {
    render() {
        const { props } = this;

        return (
            <RNTextInput
                {...props}
                ref={(input) => props.inputRef && props.inputRef(input)}
            />
        );
    }
}

然后我像这样使用它:

import React, {Component} from 'react';
import {
    View,
} from 'react-native';
import TextInput from "../../components/TextInput";

class Login extends Component {
    constructor(props) {
        super(props);
        this.passTextInput = null
    }

    render() {
        return (
            <View style={{flex:1}}>
                <TextInput
                    style={{flex:1}}
                    placeholder="Username"
                    onSubmitEditing={(event) => {
                        this.passTextInput.focus()
                    }}
                />

                <TextInput
                    style={{flex:1}}
                    placeholder="Password"
                    inputRef={(input) => {
                        this.passTextInput = input
                    }}
                />
            </View>
        )
    }
}

Answer 7

对我来说,RN 0.50.3可以用这种方式:

<TextInput 
  autoFocus={true} 
  onSubmitEditing={() => {this.PasswordInputRef._root.focus()}} 
/>

<TextInput ref={input => {this.PasswordInputRef = input}} />

你必须看到这个.PasswordInputRef._root .focus()

Answer 8

如果你碰巧tcomb-form-native像我一样使用,你也可以这样做.这是诀窍:不是TextInput直接设置道具,而是通过它来实现options.您可以将表单的字段称为:

this.refs.form.getComponent('password').refs.input.focus()

所以最终产品看起来像这样:

var t = require('tcomb-form-native');
var Form = t.form.Form;

var MyForm = t.struct({
  field1:     t.String,
  field2:     t.String,
});

var MyComponent = React.createClass({

  _getFormOptions () {
    return {
      fields: {
        field1: {
          returnKeyType: 'next',
          onSubmitEditing: () => {this.refs.form.getComponent('field2').refs.input.focus()},
        },
      },
    };
  },

  render () {

    var formOptions = this._getFormOptions();

    return (
      <View style={styles.container}>
        <Form ref="form" type={MyForm} options={formOptions}/>
      </View>
    );
  },
});

(感谢remcoanker在这里发布这个想法:https://github.com/gcanti/tcomb-form-native/issues/96)

Answer 9

这就是我实现它的方式。下面的示例使用了React 16.3中引入的React.createRef（）API。

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.secondTextInputRef = React.createRef();
  }

  render() {
    return(
        <View>
            <TextInput
                placeholder = "FirstTextInput"
                returnKeyType="next"
                onSubmitEditing={() => { this.secondTextInputRef.current.focus(); }}
            />
            <TextInput
                ref={this.secondTextInputRef}
                placeholder = "secondTextInput"
            />
        </View>
    );
  }
}

我认为这会对您有所帮助。

Answer 10

在 React Native 的 GitHub 问题上试试这个解决方案。

https://github.com/facebook/react-native/pull/2149#issuecomment-129262565

您需要为 TextInput 组件使用 ref 属性。
然后，您需要创建一个在 onSubmitEditing 道具上调用的函数，该道具将焦点移到第二个 TextInput ref 上。

var InputScreen = React.createClass({
    _focusNextField(nextField) {
        this.refs[nextField].focus()
    },

    render: function() {
        return (
            <View style={styles.container}>
                <TextInput
                    ref='1'
                    style={styles.input}
                    placeholder='Normal'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('2')}
                />
                <TextInput
                    ref='2'
                    style={styles.input}
                    keyboardType='email-address'
                    placeholder='Email Address'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('3')}
                />
                <TextInput
                    ref='3'
                    style={styles.input}
                    keyboardType='url'
                    placeholder='URL'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('4')}
                />
                <TextInput
                    ref='4'
                    style={styles.input}
                    keyboardType='numeric'
                    placeholder='Numeric'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('5')}
                />
                <TextInput
                    ref='5'
                    style={styles.input}
                    keyboardType='numbers-and-punctuation'
                    placeholder='Numbers & Punctuation'
                    returnKeyType='done'
                />
            </View>
        );
    }
});

Answer 11

将@Eli Johnson 的功能组件解决方案与@Rodrigo Tessarollo 的 CustomTextInput 解决方案相结合：

import React, { useRef } from 'react';
import { CustomTextInput } from 'path/to/CustomTextInput';
...


export const MyFormComponent = () => {

  const ref_to_input2 = useRef();

  return (
    <>
      <CustomTextInput
        placeholder="Input 1"
        autoFocus={true}
        returnKeyType="next"
        onSubmitEditing={() => ref_to_input2.current.focus()}
      />
      <CustomTextInput
        placeholder="Input 2"
        returnKeyType="done"
        refInner={ref_to_input2}
        onSubmitEditing={/* Do something! */}
      />
    </>
  )
}

并在您的 CustomTextInput 组件中：

import { TextInput } from "react-native";
export const CustomTextInput = (props) => {
  <TextInput
        ref={props.refInner}
        {...props}
  />
}

Answer 12

我的场景是<CustomBoladonesTextInput />包装一个RN <TextInput />。

我解决了这个问题，如下所示：

我的表格如下：

  <CustomBoladonesTextInput 
      onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
      returnKeyType="next"
      ... />

  <CustomBoladonesTextInput 
       ref={ref => this.customInput2 = ref}
       refInner="innerTextInput2"
       ... />

在CustomBoladonesTextInput的组件定义上，我将refField传递给内部ref属性，如下所示：

   export default class CustomBoladonesTextInput extends React.Component {
      render() {        
         return (< TextInput ref={this.props.refInner} ... />);     
      } 
   }

和瞧。一切恢复正常。希望这可以帮助

Answer 13

<TextInput placeholder="Nombre"
    ref="1"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.First_Name}
    onChangeText={First_Name => this.setState({ First_Name })}
    onSubmitEditing={() => this.focusNextField('2')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

<TextInput placeholder="Apellido"
    ref="2"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.Last_Name}
    onChangeText={Last_Name => this.setState({ Last_Name })}
    onSubmitEditing={() => this.focusNextField('3')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

并添加方法

focusNextField(nextField) {
    this.refs[nextField].focus();
}