React native refs is undefined in when reading Text Input ref in Component

Question

I have several components in my application each with a textInput field. As each textInput is submit then I want it to focus on the next component's textInput field. Instead my function in the parent component says:

undefined is not an object (evaluating'_this.refs[nextField].focus')

This is my code:

export default class Parent extends React.Component {
....
render() {
    return (
      <ScrollView>
         <View style={{padding:20}}>
             <One
                 ...
                 onSubmitEditing={this.focusNextField("2")} />

              <TWO
                 .../>
    )
  }
focusNextField = (nextField) => {
    alert(nextField)
    this.refs[nextField].focus()
 }
}

export default class One extends React.Component {
    render() {
        return (
             <View style={{paddingBottom:5}}>
                <TextInput
                 ref="1"
                 style={{height:60,paddingLeft:20}}
                 placeholder="Enter your name"
                 onSubmitEditing={this.props.onSubmitEditing} />
             </View>
     )
  }
}


export default class Two extends React.Component {
    render() {
        return (
           <View style={{paddingBottom:5}}>
               <TextInput
               ref="2"
               keyboardType="phone-pad"
               style={{height:60,paddingLeft:20}}
               placeholder="Enter your age" />
          </View>
      )
   }
}

How can you use refsfrom different components?

Answer 1

In order to access refs of another component you need to access that component as a ref too. For example this.refs[nextField].refs[childref]. In this way you can travel down the tree In order to access a DOM element, you should use React.findDOMNode()

export default class Parent extends React.Component {
....
render() {
    return (
      <ScrollView>
         <View style={{padding:20}}>
             <One
                 ...
                 onSubmitEditing={this.focusNextField.bind(this, "two","2")} />

              <TWO ref="two"
                 .../>
    )
  }
focusNextField = (nextField, childref) => {
    alert(nextField)
    React.findDOMNode(this.refs[nextField].refs[childref]).focus();
 }
}

export default class One extends React.Component {
    render() {
        return (
             <View style={{paddingBottom:5}}>
                <TextInput
                 ref="1"
                 style={{height:60,paddingLeft:20}}
                 placeholder="Enter your name"
                 onSubmitEditing={this.props.onSubmitEditing} />
             </View>
     )
  }
}


export default class Two extends React.Component {
    render() {
        return (
           <View style={{paddingBottom:5}}>
               <TextInput
               ref="2"
               keyboardType="phone-pad"
               style={{height:60,paddingLeft:20}}
               placeholder="Enter your age" />
          </View>
      )
   }
}