在TextInput引用上调用focus方法时出现未定义的异常

时间:2016-10-13 11:30:13

标签: android react-native

我正在尝试实现建议的解决方案here,以便将焦点放在下一个TextInput上。该解决方案是针对iOS提出的,但我认为它也适用于Android。

但是我得到以下例外:

  <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>

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

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

有人可以帮我解决异常吗? (RN 0.29,Android)

::Facility::ProcedureDecorator

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

1 个答案:

答案 0 :(得分:5)

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

您可以将一个焦点功能添加到FloatingLabel组件,如下所示:

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

并将ref添加到render

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