Реагировать на собственный TextInput setState () скрывает клавиатуру

Question

Пожалуйста, проверьте ссылку закуски, https://snack.expo.io/@banid/textinput TextInput в представлении фильтра (показывает, когда кнопка нажата) скрывает клавиатуру всякий раз, когда я вызываю setState (). Я вызываю setState, чтобы обновить значение TextInput. Из-за этого я не могу печатать постоянно на TextInput. Это ошибка или я что-то не так делаю ?? Спасибо

Answer 1

Проблема в том, что вы создаете совершенно новую (анонимную) функцию , которая отображает заголовок FlatList при каждом обновлении

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

Таким образом, вместо обновления существующего создается новый TextInput.

Решение

изменить ListHeaderComponent={() => this.showHeader()}

до ListHeaderComponent={this.showHeader}, поскольку ListHeaderComponent может быть функцией

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

Аналогичная проблема: https://github.com/react-native-training/react-native-elements/issues/559

Answer 2

Кажется, фокус удаляется из TextInput после каждого setState, вот обходной путь, который вы можете использовать:

Изменение

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

К

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

Что он делает, так это возвращает фокус на searchInput после вызова setState