コンポーネント内のテキスト入力refを読み込むときに、ネイティブリファレンスが未定義です

Question

私のアプリケーションには、それぞれtextInputフィールドを持ついくつかのコンポーネントがあります。各textInputがサブミットされているので、次のコンポーネントのtextInputフィールドにフォーカスします。代わりに、親コンポーネントの私の機能は言う：

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

これは私のコードです：

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> 
    ) 
    } 
} 

どのように異なるコンポーネントからrefsを使用することができますか？

Answer 1

他のコンポーネントのリファレンスにアクセスするには、そのコンポーネントにもリファレンスとしてアクセスする必要があります。たとえば、this.refs[nextField].refs[childref]です。あなたはDOM要素にアクセスするためには、ツリー を下に移動することができますこの方法では、あなたが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> 
    ) 
    } 
}