Fokus auf TextInput auf TouchableHighlight setzen onPress Native Eingabe

Question

Ich versuche, den Fokus auf ein TextInput auf TouchableHighlight OnPress-Methode zu bekommen. Aber das gibt mir den folgenden Fehler.

undefiniert ist kein Objekt (Bewertung this.refs.TotalInputField.focus')

Mein Code ist wie folgt.

setCustomTotalAmount(value) { 
     LayoutAnimation.easeInEaseOut(); 
     this.setState({ 
      customTextValue: true 
     }); 
     this.refs.TotalInputField.focus(); 
}, 

renderTotalAmountInModal() { 
     if (this.state.customTextValue) { 
      return (
       <TextInput 
        style={styles.totalTextInput} 
        ref='TotalInputField' 
        returnKeyType='done' 
        onChangeText={(totalAmount) => this.setCustomTotalValue(totalAmount)} 
        keyboardType='numeric' 
        defaultValue={this.state.totalAmount} 
       /> 
      ); 
     } else { 
      return (
       <Text style={styles.totalAreaText}>{this.props.symbol}{(this.state.totalAmount).toFixed(2)}</Text> 
      ); 
     } 
}, 

render(){ 
    return(
      <TouchableHighlight underlayColor="rgba(0,0,0,0)" 
           style={styles.customTotalButtonBorder} 
           onPress={this.setCustomTotalAmount.bind(this, true)}> 
       <Text style={styles.buttonBorderText}>Set a custom total/Text> 
      </TouchableHighlight> 
    ) 
}, 

Wie geht das richtig? TIA.

Answer 1

Die Antwort wurde von BTM auf reactiflux #general Chat zur Verfügung gestellt.

Das Problem war, dass die Komponente nicht ordnungsgemäß montiert wurde, wenn die Ref aufgerufen wurde.

componentDidUpdate(prevProps, prevState) { 
    if(prevState.customTextValue === false && this.state.customTextValue === true) { 
    this.refs.TotalInputField.focus(); 
    } 
} 

Dies löste das Problem.