Question

我的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）=＆gt; {this.refs.PhoneInput.focus（）;}}'不起作用。

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

我的问题在于'这个'。

感谢您的帮助。

Answer 1

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

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

TextInput下一个焦点

1 个答案: