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

【问题标题】：undefined exception while calling focus method on TextInput ref在 TextInput ref 上调用焦点方法时出现未定义的异常
【发布时间】：2016-10-13 11:30:12
【问题描述】：

我正在尝试实施here 提出的解决方案，以将焦点设置在下一个 TextInput 上。该解决方案是针对 iOS 提出的，但我认为它也应该适用于 Android。

但是我得到以下异常：

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

我使用这个Floating Label 作为我的文本输入组件。这是我的代码：

  <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，安卓）

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

为什么我无法调用焦点方法？

【问题讨论】：

标签： android react-native

【解决方案1】：

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

您可以向 FloatingLabel 组件添加焦点功能，如下所示：

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

并在 render 中为 TextInput 添加一个引用

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

【讨论】：