CODEWITHSUNDEEP
react-native
Pierre Charpentier
Pierre Charpentier

Reputation: 270

TextInput next Focus

I have a problem with the focus of my TextInput. I want to focus on the next TextInput when I submit. I have a problem with my 'this' because of my navigator. This is my code :

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

My 'onSubmitEditing={(event) => {this.refs.PhoneInput.focus();}}' doesn't work.

I have an error : undefined is not an object (evaluating 'this.refs.PhoneInput.focus)

My problem is with the 'this'.

Thanks for your help.

Upvotes: 1

Views: 1260

Answers (1)

John Shammas
John Shammas

Reputation: 2715

You should not be using refs with a String value. The more appropriate way to create a reference to a component is with a function:

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

Upvotes: 2

Related Questions