在 TextInput ref 上调用焦点方法时出现未定义的异常

问题描述

我正在尝试实施提议的解决方案 此处 用于将焦点设置在下一个 TextInput 上.该解决方案适用于 iOS，但我认为它也适用于 Android.

I am trying to implement the solution proposed here for setting the focus on the next TextInput. The solution is proposed for iOS but I think it should also work for Android.

但是我收到以下异常:

undefined is not a function (evaluating '_this3.refs.Second.focus()')

我正在使用这个 浮动标签 作为我的文本输入组件.这是我的代码:

I am using this Floating Label as my Text Input component. Here is my code:

  <FloatingLabel
            label='First'
            ref='First'
            validationRegex={/[A-Za-z0-9 ]+/}
            value={this.props.First}
            style={commonStyles.formInput}
            onSubmitEditing={(event) => {this.refs.Second.focus()}}
              onChangeText={(text) => this.onUpdate('First', text)}>
              First</FloatingLabel>

  <FloatingLabel
            label='Second'
            ref='Second'
            style={commonStyles.formInput}
            value={this.props.Second}
            validationRegex={/(^([a-zA-Z]{5})([0-9]{4})([a-zA-Z]{1})$)/}
            onChangeText={(text) => this.onUpdate('Second', text)}>
          Second</FloatingLabel>

有人可以帮我解决异常吗?(RN 0.29，安卓)

Can somebody help me in solving the exception? (RN 0.29, Android)

onSubmitEditing={(event) => {console.log(this.refs.Second)}} //works fine

为什么我无法调用focus方法?

Why am I unable to call the focus method?

推荐答案

this.refs.Second 是一个 FloatingLabel 对象，它没有名为focus"的方法.

this.refs.Second is a FloatingLabel object which don't have a method named "focus".

您可以为 FloatingLabel 组件添加一个焦点函数，如下所示:

You can add a focus function to FloatingLabel component like below:

focus() {
    this.refs.textInput.focus();
},

并在渲染中添加对 TextInput 的引用

and add a ref to the TextInput in render

<View style={elementStyles}>
    {this._renderLabel()}
    <TextInput
      ref={'textInput'}
      {...props}
    >
    </TextInput>
</View>

这篇关于在 TextInput ref 上调用焦点方法时出现未定义的异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！