webentwicklung-frage-antwort-db.com.de

Löschen Sie native Textinput-Reaktionen

Das Redux AddTodo-Beispiel in React Native durcharbeiten. Das erste AddTodo-Beispiel unten verwendet state zum Speichern des TextInput-Werts und funktioniert einwandfrei.

class AddTodo extends React.Component{

    constructor(props){
        super(props);
        this.state = { todoText: "" }; 
    }
    update(e){
        if(this.state.todoText.trim()) this.props.dispatch(addTodo(this.state.todoText)); 
        this.setState({todoText: "" }); 
    }
    render(){
        return(
            <TextInput 
                value = {this.state.todoText}
                onSubmitEditing = { (e)=> { this.update(e); } }
                onChangeText = { (text) => {this.setState({todoText: text}) } } />
        );
    }
}

Nach einigen der Redux-Beispiele ist der folgende Code jedoch viel kürzer und funktioniert auch, außer dass die TextInputvalue nach dem Senden nicht gelöscht wird

let AddTodo = ({ dispatch }) => {

  return (
      <TextInput 
          onSubmitEditing = { e => { dispatch(addTodo(e.nativeEvent.text)) } } 
      />
  )
}

Gibt es eine Möglichkeit, den InputText-Wert von onSubmitEditing zu löschen?

javascriptreact-native
21
Dave Pile

Fügen Sie Ihrem TextInput beispielsweise ref hinzu:

 <TextInput ref={input => { this.textInput = input }} />

rufen Sie dann this.textInput.clear() auf, um Ihren Eingabewert zu löschen

34
Kawatare267

Die Standard-Klartext-Schaltfläche wird angezeigt.

<TextInput clearButtonMode="always" />
9
Aseem

Entsprechend den Änderungen und Empfehlungen nach React 16.3 müssen Sie den Ref mit Hilfe von React.createRef bei Ihrem Konstruktor abrufen: 

Bei der Konstruktorfunktion: this.myTextInput = React.createRef();

Bei der Renderfunktion: 

<TextInput ref={this.myTextInput} />

Und dann kannst du anrufen 

this.myTextInput.current.clear();

[1] https://reactjs.org/docs/refs-and-the-dom.html

3
Marcio S Galli

das funktioniert für mich

  ref={element => {  
          //Clear text after Input
                this.attendee = element
              }}
              onSubmitEditing={this.handleAddPress}

und this.attendee.setNativeProps({ text: '' }) // Text nach Eingabe löschen

1
Hansa Tharuka

Folgendes Codebeispiel: 

<TextInput 
    onChangeText={(text) => this.onChangeText(text)} 
    ref={component => this._textInput = component}
    onSubmitEditing={() => {
       this.clearText()
     }}
/>

clearText(){
  this._textInput.setNativeProps({ text: ' ' });

  setTimeout(() => {
    this._textInput.setNativeProps({ text: '' });
   },3);
}
0
Gurbela

Ich mache diesen Code zum Löschen von TextInput in React Native OnSubmitEditing Sie können meinen Snack überprüfen: https://snack.expo.io/@andreh111/clear-textinput-onsubmitingiting

Hier ist der Code:

state = {
    searchInput:'',
    clearInput:false
}
render(){
  return(



  <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
    <TextInput 
            style={{
              borderColor:'black',
              borderWidth:1,
              width:200,
              height:50
            }}
              onChangeText={(searchInput)=>this.setState({
                searchInput
              })}
              value={!this.state.clearInput ? this.state.searchInput : null}
              onSubmitEditing={()=>{
                this.setState({
                  clearInput:!this.state.clearInput,

                })

              }}
     />
</View>
)

}
0
Andreh Abboud

Das hat bei mir funktioniert ..

Init myTextInput beim Konstruktor:

this.myTextInput = React.createRef();

Fügen Sie die Referenz bei der Renderfunktion hinzu:

<Input ref={this.myTextInput} />

Und dann kannst du anrufen

this.myTextInput.current.value='';
0
mharindu

Ich verwende Native base Und so habe ich es funktionieren lassen

constructor(props) {
    super(props);
    this.searchInput = React.createRef();
}

<Input
    placeholder="Search"
    ref={this.searchInput}
/>

dann, wenn ich löschen will, benutze ich 

    this.searchInput.current._root.clear();

referenz https://github.com/facebook/react-native/issues/18843

0
Fadi Abo Msalam

Ein einfacherer Ansatz besteht darin, die Eigenschaft value von TextInput zu verwenden und den Wert von textInput über das Objekt state value der Komponente festzulegen.

state = {
   inputTextValue : '',
}

submitText = () => {
    //handle the click action

    //add this line at the end of the function after you are done handling with the input text value.
    this.state.inputTextValue = '';
}  

<TextInput 
       onChangeText={(text) => this.setState({ inputText: text })}
       placeholder="Monday's breakfast"
       value={this.state.inputTextValue}
 />
 <TouchableOpacity 
       onPress={() => this.submitText()}>
       <Text>Submit</Text>
 </TouchableOpacity>
0
Ezio