TextInput 下一个焦点答案

【问题标题】：TextInput next FocusTextInput 下一个焦点
【发布时间】：2015-11-25 09:14:44
【问题描述】：

我的 TextInput 的焦点有问题。我想在提交时专注于下一个 TextInput。由于我的导航器，我的“this”有问题。这是我的代码：

'use strict';

var React = require('react-native');
var styles = require('./common/styles.js');
var myStrings = require ('./common/strings-messages');
var name='';
var phone='';
var email='';

var {
  Image,
  StyleSheet,
  Component,
  View,
  Text,
  TextInput,
  Navigator,
  TouchableHighlight,
  TouchableOpacity,
  ScrollView,
} = React;

class PageUserInfos extends Component {
  render() {
    return (
      <Navigator
      renderScene={this.renderScene.bind(this)}
      navigator={this.props.navigator}
      navigationBar={
        <Navigator.NavigationBar style={styles.navigation_bar}
            routeMapper={NavigationBarRouteMapper} />
      } />
    );
  }
  renderScene(route, navigator) {
    return (
      <View style={styles.parent}>
          <TextInput style={styles.text_input}
            keyboardType='default'
            defaultValue={name}
            placeholder={myStrings.form_label_name}
            onChangeText={(text) => {name=text; this.setState((state) => {return {};})}}
            onSubmitEditing={(event) => {this.refs.PhoneInput.focus();}}
            value={this.getState}/>
          <TextInput style={styles.text_input}
            ref='PhoneInput'
            keyboardType='numeric'
            defaultValue={phone}
            placeholder={myStrings.form_label_phone}
            onChangeText={(text) => {phone=text; this.setState((state) => {return {};})}}
            value={this.getState}/>
      </View>
    );
  }

}

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    return (
      <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
      onPress={() => navigator.parentNavigator.pop()}>
        <Text style={{color: 'white', margin: 10,}}>
          {myStrings.nav_previous}
        </Text>
      </TouchableOpacity>
    );
  },
  RightButton(route, navigator, index, navState) {
    return (
      <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
      onPress={() => navigator.parentNavigator.push({id: 'PersonPage', nameUser: name, phoneUser: phone, emailUser: email})}>
        <Text style={{color: 'white', margin: 10,}}>
          {myStrings.nav_next}
        </Text>
      </TouchableOpacity>
    );
  },
  Title(route, navigator, index, navState) {
    return (
      <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
        <Text style={{color: 'white', margin: 10, fontSize: 16}}>
          {myStrings.page_title_user_infos}
        </Text>
      </TouchableOpacity>
    );
  }
};

module.exports = PageUserInfos;

我的 'onSubmitEditing={(event) => {this.refs.PhoneInput.focus();}}' 不起作用。

我有一个错误：未定义不是一个对象（评估 'this.refs.PhoneInput.focus）

我的问题在于“this”。

感谢您的帮助。

【问题讨论】：

标签： react-native

【解决方案1】：

您不应该使用带有 String 值的 refs。创建对组件的引用更合适的方法是使用函数：

ref={(view) => this.phoneInput = view}

【讨论】：