文本输入下一个焦点

Question

我的TextInput的焦点有问题。我想在提交时关注下一个TextInput。我的"这个"有问题，因为我的导航器。这是我的代码：

'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（）；}｝"不起作用。

我有一个错误：undefined不是对象（正在评估this.refs.PhoneInput.focus）

我的问题是"这个"。

谢谢你的帮助。

Answer 1

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

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