2016-05-25 5 views
0

Ich versuche, eine Texteingabe zu löschen, die setNativeProps({ text: '' }) verwendet, die laut der Dokumentation eine allgemeine Möglichkeit ist, dies zu tun - aufgrund des Flackerns von Zustandsänderungen - jedoch ich habe bemerkt, dass onChange nicht aufgerufen wird, wenn setNativeProps aufgerufen wird. Für mich ist das ein Problem, da ich eine veränderbare TextArea benutze. Ich brauche die TextArea, um ihre Höhe zurückzusetzen, die gerade onChange ist.React Native - TextInput.setNativeProps löst nicht onChange

Wenn jemand helfen kann, mein Problem zu beleuchten, würde es sehr geschätzt werden.

Hier ist die Komponente

import React, { Component } from 'react'; 
import { 
    TextInput, 
} from 'react-native'; 

export default class Input extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     height: 35, 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    componentWillMount() { 
    const { defaultHeight } = this.props; 

    if (defaultHeight) { 
     this.setState({ 
     height: defaultHeight, 
     }); 
    } 
    } 

    handleChange(event) { 
    console.log(event); 
    if (this.state.height !== event.nativeEvent.contentSize.height) { 
     this.setState({ 
     height: Math.max(this.props.defaultHeight, event.nativeEvent.contentSize.height), 
     }); 
    } 

    if (this.props.onChange) { 
     this.props.onChange(event); 
    } 
    } 

    render() { 
    const { style, ...props } = this.props; 

    return (
     <TextInput 
     ref="input" 
     style={[{ height:this.state.height }, style]} 
     multiline 
     {...props} 
     onChange={this.handleChange} 
     />); 
    } 
} 

Input.propTypes = { 
    style: React.PropTypes.number, 
    onChange: React.PropTypes.func, 
    defaultHeight: React.PropTypes.number, 
}; 

Aus meiner anderen Komponente, ich tue das im Anschluss an die Eingabe noch

this.refs.input.refs.input.setNativeProps({ text: '' });

+0

Verwenden Sie ein Plugin? Wenn ja, welche? Können Sie den Code Ihrer Komponente posten? –

+0

@AdamTerlson Ich habe gerade die Frage aktualisiert, um den Code zu haben –

Antwort

0

ich noch keinen Weg für onChange gefunden haben, löschen gerufen werden, aber ich habe eine Lösung gefunden.

Die Lösung war eine andere Funktion zu erstellen, die setNativeProps anrufen und den Staat

resetInputText() { 
    this.refs.input.setNativeProps({ text: '' }); 
    this.setState({ 
     height: this.props.defaultHeight, 
    }); 
    } 

Aus meiner anderen Komponente setze ich dann this.refs.input.resetInputText(); nennen könnte und das gewünschte Ergebnis sehen.