React Native TextInput setState() 隐藏键盘 [英] React Native TextInput setState() hides keyboard

问题描述

请查看小吃链接，https://snack.expo.io/@banid/textinput当我调用 setState() 时，过滤器视图上的 TextInput(在按下按钮时显示)隐藏键盘.我调用 setState 来更新 TextInput 的值.由于这个原因，我无法在 TextInput 上连续输入.这是一个错误还是我做错了什么?谢谢

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

推荐答案

问题在于您正在创建一个新(匿名)函数，该函数在每次更新时呈现 FlatList 的标题

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

this.showHeader()}/>

因此正在创建一个新的 TextInput 而不是更新现有的.

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

解决方案:

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

到 ListHeaderComponent={this.showHeader} 因为 ListHeaderComponent 可以是一个函数

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

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

类似问题:https://github.com/react-native-training/反应原生元素/问题/559

这篇关于React Native TextInput setState() 隐藏键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！