2016-11-11 24 views
0

Ich versuche, meiner benutzerdefinierten Komponente die Option Ref zu verwenden, aber ich bin nicht sicher, wie es geht, was wäre der beste Weg, das zu tun?React/React-Native Refs [FIXED]

<View style={ styles.wrapItems }> 
    <TouchableOpacity onPress={() => this.emailInput.onError() }> 
    <Text>Show Error</Text></TouchableOpacity> 
    <InputField ref={(ref) => this.emailInput = ref } alignItems={'center'} placeholder="Your Email" /> 
    <InputField ref={(ref) => this.passwordInput = ref } secureTextEntry={true} placeholder="Your Password" /> 
</View> 

Inside my Component

export default class InputField extends Component { 
    constructor(props) { 
    super(props); 
    } 
    -static- onError() { 
    alert('On Error'); 
    } 
return (
<View style={ styles.inputWr }> 
    <TextInput 
    style={ [styles.input, textDir, textColor] } 
    onChangeText={this.onChangeText} 
    keyboardType={keyboardType} 
    underlineColorAndroid={'rgba(0,0,0,0)'} 
    onFocus={this.onFloatLabel} 
    secureTextEntry={secureTextEntry} 
    value={this.state.text} 
    onBlur={this.onFloatLabel} /> 

** I entfernt die statische Funktion und es funktionierte.

+0

Was versuchen Sie eigentlich? Zugriff auf den Wert des Eingabefeldes? – azium

+0

@azium, ich habe eine statische Funktion in meiner Komponente, die ich von außen aufrufen möchte, aber ich muss irgendwie diese Komponente ref. –

+0

Normalerweise in Reagieren mit Refs bedeutet, dass Sie etwas falsch machen. Können Sie Ihre Komponente mit der statischen Methode und der Komponente, von der Sie sie aufrufen möchten, veröffentlichen? es gibt fast sicher einen besseren Weg – azium

Antwort

1

Sie müssen die ref Parameter this.emailInput

<InputField ref={ref => this.emailInput = ref} alignItems={'center'} placeholder="Your Email" /> 

Aber Vorsicht mit Refs, normalerweise zuweisen es ist kein guter Ansatz (manchmal Requisiten Rückrufe den Job).