React Native TextInput setState() hides keyboard

问题

Please check on the snack link, https://snack.expo.io/@banid/textinput The TextInput on the filter view(shows when the button is pressed) hides keyboard when ever I call setState(). I call setState to update the value of TextInput. Bcause of this I can't type continuously on the TextInput. Is this a bug or am I doing something wrong?? Thank you

回答1:

The problem is that you are creating a brand new (anonymous) function that renders the header of the FlatList on every update

<FlatList .... ListHeaderComponent={() => this.showHeader()} />

So a new TextInput is being created instead of updating the existing one.

Solution:

change ListHeaderComponent={() => this.showHeader()}

to ListHeaderComponent={this.showHeader} as ListHeaderComponent can be a function

https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Similar Issue: https://github.com/react-native-training/react-native-elements/issues/559

回答2:

It seems the focus is being removed from the TextInput after every setState, here's a work around you can use:

Change

this.setState({
    filterSearchText: text,
    data: newData,
});

To

this.setState({
    filterSearchText: text,
    data: newData,
}, () => {
    this.searchInput.focus();
});

What this does is it brings back the focus to searchInput after a setState is called

来源：https://stackoverflow.com/questions/56180263/react-native-textinput-setstate-hides-keyboard