ReactNative TextInput 焦点 [英] ReactNative TextInput Focus

问题描述

我的应用程序中有一个表单，我希望用户能够通过单击下一步"返回按钮转到下一个 TextInput.我的输入组件:

I'm having a form in my application where I want the user to be able to go to the next TextInput by clicking the "Next" return button. My Input component:

    export default class Input extends Component {

  focusNextField = (nextField) => {
    console.log('NEXT FIELD:', nextField);
    this.refs[nextField].focus();
  }

  render() {

    var keyboardType = this.props.keyboardType || 'default';
    var style = [styles.textInput, this.props.style];

    if (this.props.hasError) style.push(styles.error);

    return (
      <View style={styles.textInputContainer}>
        <TextInput
          placeholder={this.props.placeholder}
          onChangeText={this.props.onChangeText}
          style={style}
          blurOnSubmit={false}
          ref={this.props.reference}
          returnKeyType= {this.props.returnType}
          onSubmitEditing={() => this.focusNextField(this.props.fieldRef)}
          secureTextEntry={this.props.isPassword}
          value={this.props.value}
          keyboardType={keyboardType}
          underlineColorAndroid="transparent" />
        {this.props.hasError && this.props.errorMessage ? <Text style={{ color: 'red' }}>{this.props.errorMessage}</Text> : null}
      </View>
    );
  }
}

以及它是如何使用的:

<Input onChangeText={(email) => this.setState({ email })} value={this.state.email} returnType={"next"} reference={'1'} fieldRef={'2'} keyboardType="email-address" />

      <Text style={{ color: '#fff', marginTop: 10, }}>Password</Text>
      <Input onChangeText={(password) => this.setState({ password })} value={this.state.password} returnType={"done"}
       reference={'2'} fieldRef={'2'} isPassword={true} />

但我收到错误:

undefined is not an object (evaluating _this.refs[nextField].focus)

推荐答案

不确定您是否仍在尝试这样做，但对于遇到问题的其他人，请执行以下操作:

Not sure if you are still trying to do this but for anyone else who has the problem, please do the following :

1. 将此代码添加到您的导入(导入中的任何位置)

1. Add this code to your imports (anywhere in your imports)

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)
  }
};

将以下行添加到您的构造函数中

Add the following lines to your constructor

this.focusNextField = this.focusNextField.bind(this);
this.inputs = {};

将以下函数添加到您的类中

Add the following function to your class

focusNextField(id) {
  this.inputs[id].focus();
}

编辑您的 TextInput 如下:

<TextInput
  onSubmitEditing={() => {this.focusNextField('two');}}
  ref={ input => {this.inputs['one'] = input;}}
/>
<TextInput
  onSubmitEditing={() => {this.focusNextField('three');}}
  ref={ input => {this.inputs['two'] = input;}}
/>
....

这是答案的来源

为我工作了 0.45.

Worked in 0.45 for me.

这篇关于ReactNative TextInput 焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！