Реагировать на внутренние ссылки для ссылок в настраиваемом компоненте

Question

У меня есть пользовательский TextInput. Когда я редактирую первый TextInput и нажимаю «Далее» на клавиатуре, я хочу, чтобы он сфокусировал второй TextInput. Я искал это раньше в переполнении стека, и, похоже, я могу это сделать, используя ref. Однако я не уверен, как это сделать с пользовательским TextInput.

Вот мой основной код CustomTextInput:

let CustomTextInput = React.createClass({ 
    propTypes: { 
     refName: React.PropTypes.string, 
     returnKeyType: React.PropTypes.string, 
     onSubmitEditing: React.PropTypes.func 
    }, 

    getDefaultProps: function(){ 
     return { 
      refName: "", 
      returnKeyType: "default", 
      onSubmitEditing:() => {} 
     } 
    }, 

    render: function(){ 
     return(
      <View> 
       <TextInput 
        ref={this.props.refName} 
        returnKeyType={this.props.returnKeyType} 
        onSubmitEditing={this.props.onSubmitEditing} 
       /> 
      </View> 
     ) 
    } 
}); 

module.exports = CustomTextInput 

А вот мой родительский класс, который называет его:

let MyParent = React.createClass({ 
    render: function(){ 
     return(
      <View> 
       <CustomTextInput 
        refName={'firstNameInput'}, 
        returnKeyType={'next'} 
        onSubmitEditing={(event) => { 
         this.refs.lastNameInput.focus(); 
        }} 
       /> 
       <CustomTextInput 
        refName={'lastNameInput'} 
       /> 
      </View> 
     ) 
    } 
}); 

Прямо сейчас, когда я нажмите Далее в клавиатуре после выбора ПгвЬЫата , я получил исключение:

undefined is not an object (evaluating '_this2.refs.lastNameInput.focus') 

Я не уверен, что я сделал не так. Любая помощь оценили. :)

Answer 1

попробовать это:

let AwesomeProject = React.createClass({ 
    onSubmitEditing:function(event){ 
     if (this.myTextInput !== null) { 
      this.myTextInput.focus(); 
     } 
    }, 
    render(){ 
     return(
      <View> 
       <CustomTextInput 
        returnKeyType={'next'} 
        onSubmitEditing={this.onSubmitEditing} 
       /> 
       <CustomTextInput 
        refName={(ref) => this.myTextInput = ref} 
       /> 
      </View> 
     ) 
    } 
}); 

Answer 2

Вот решение, которое работает для меня - в основном вы сделать ссылку внутри пользовательского компонента, который вы можете получить доступ из вашей ссылки в вашем родительском компоненте:

let CustomTextInput = React.createClass({ 
    propTypes: { 
     refName: React.PropTypes.string, 
     returnKeyType: React.PropTypes.string, 
     onSubmitEditing: React.PropTypes.func 
    }, 

    getDefaultProps: function(){ 
     return { 
      refName: "", 
      returnKeyType: "default", 
      onSubmitEditing:() => {} 
     } 
    }, 

    render: function(){ 
     return(
      <View> 
       <TextInput 
        ref="input" 
        returnKeyType={this.props.returnKeyType} 
        onSubmitEditing={this.props.onSubmitEditing} 
       /> 
      </View> 
     ) 
    } 
}); 

module.exports = CustomTextInput 

И в родительском компоненте:

let MyParent = React.createClass({ 
    render: function(){ 
     return(
      <View> 
       <CustomTextInput 
        refName={'firstNameInput'}, 
        returnKeyType={'next'} 
        onSubmitEditing={(event) => { 
         this.lastNameInput.refs.input.focus(); 
        }} 
       /> 
       <CustomTextInput 
        refName={ref => this.lastNameInput = ref} 
       /> 
      </View> 
     ) 
    } 
}); 

Answer 3

 let CustomTextInput = React.createClass({ 

     componentDidMount() { 
      // this is to check if a refName prop is FUNCTION; 
      if (typeof this.props.rex === "function") { 
       this.props.refName(this.refs.inp); 
      } 
     } 
     render: function(){ 
      return(
       <View> 
        <TextInput 
         ref={"inp"} 
        /> 
       </View> 
      ) 
     } 
    }); 



    let MyParent = React.createClass({ 
    render: function(){ 
     return(
      <View> 
       <CustomTextInput 
       refName=(firstNameInput)=>this.firstNameInput=firstNameInput} 

       /> 

      </View> 
     ) 
    } 
});