FlatList中的TextInput在离开屏幕时失去焦点
是因为FlatList组件的渲染机制导致的。FlatList是React Native中用于展示长列表数据的高性能组件，它通过只渲染可见区域的方式来提升性能。当列表滚动时，超出可见区域的内容会被销毁，并在需要时重新渲染。
由于TextInput组件是具有焦点的交互组件，当它被滚动出可见区域时，它会失去焦点。这是因为TextInput组件的焦点状态是绑定在组件实例上的，而不是数据源中的某个值。
为了解决这个问题，可以使用以下方法：
- 持久化焦点状态：可以在FlatList的data源中为每个TextInput项添加一个焦点状态的属性，并在组件的状态或上下文中存储焦点状态的映射。在组件重新渲染时，根据焦点状态来设置TextInput的焦点。
- 使用第三方库：可以使用一些第三方库来解决TextInput在滚动时失去焦点的问题，例如react-native-autofocus-input。这些库提供了更好的焦点管理功能，使得TextInput能够在滚动时保持焦点状态。
- 自定义组件：可以通过自定义组件来解决TextInput失去焦点的问题。在自定义组件中，可以监听FlatList的滚动事件，根据滚动位置和焦点状态来动态设置TextInput的焦点。
需要注意的是，以上方法只是解决TextInput在离开屏幕时失去焦点的问题，并不涉及其他云计算或IT互联网领域的知识。
相关·内容
我使用一个嵌套的对象，它是在我的redux存储中被安全地呈现我的FlatList。在每个集合项中，我都有一个textInput来更改我的集合中的代表，但是每次我更改输入的值时，它就会失去焦点，键盘也会被丢弃。它们是阻止注意力分散的一种方式吗？
我试图将关键属性插入到平面列表和项目组件中，但这并没有帮助。还尝试删除我的extraData属性的FlatList。我想在这种情况下，没有必要要这个。
有人能帮忙吗？
My object:
Workout:{
ExercisList:[
{
sets to render:[
{set
浏览 2提问于2021-05-05得票数 1
回答已采纳
4回答
我有一个FlatList
<View style={styles.container}>
<FlatList data={this.state.restaurants}
renderItem={({ item }) => this.renderItem(item.restaurant)}
keyExtractor={restaurant => restaurant.key}
ListHeaderComponent={() => this.renderHeaderCo
浏览 6提问于2017-10-26得票数 6
回答已采纳
当我单击列表的最后一个按钮或与屏幕底部对齐的按钮并将焦点放在TextInput上时，Modal会自动关闭，而不会出现任何错误。这只发生在android真正的设备上。这个问题在iOS或安卓模拟器上不会发生。
import React, {useState} from 'react';
import {
FlatList,
TouchableOpacity,
Button,
Modal,
TextInput,
} from 'react-native';
const data = [
0,
1,
2,
3,
4,
5,
浏览 5提问于2020-05-11得票数 3
2回答
我正在AngularJS中创建一个表单，我希望验证这些字段，问题是，只有在输入中写入某些内容并在我删除它之后，才会出现所需的消息，但我希望消息出现在输入的焦点之后。
我的代码如下
<input type="text" name="textInput" data-ng-model="field.data" class="form-control" required/>
<span ng-show="form.textInput.$dirty && form.textInput.$erro
浏览 2提问于2015-11-19得票数 1
回答已采纳
1回答
我在这个问题上花了两天时间，问题是：
当我在Flatlist中放置一个TextInput时，-- TextInput的行为发生了变化，键盘在每个字符被写入后都失去了焦点。
版本反应-本地: 0.63.2反应: 16.13.1，反应: 16.13.1，博览会：~42.0.1，
复制步骤
setInputSearchi在Flatlist的ListHeaderComponent中编写了一个文本输入
-->问题是:在按下键盘上的每个字符之后，键盘就会隐藏
国家声明：
const [inputSearch, setInputSearch] = useState(null);
TextInput在F
浏览 8提问于2021-11-04得票数 0
回答已采纳
我的一个屏幕上有一个FlatList，但它还提供了一个必须保持在页面顶部的TextInput。TextInput确定呈现哪个其他组件，如果它是空的，它是一个类别页面，但是如果它被任何文本填充，则是搜索结果。我现在的问题是，我的TextInput在主FlatList之外，这使得它即使在滚动列表时也会位于屏幕的顶端。我希望它保持在页面的顶部，而不是跟随卷轴。
如果我将TextInput放入其中一个FlatLists中，则会导致另一个FlatLists由于呈现单独的组件而没有它。但是如果我把它放在两个FlatLists中，就会创建一个bug，在输入第一个字符之后，TextInput将退出编辑模式，因
浏览 10提问于2022-05-31得票数 1
我使用带有UI Bootstrap的AngularJS在模式对话框中显示表单。但是，当单击滚动条时，任何输入都会失去焦点。
如果滚动条与div或窗口关联，就会发生这种情况。
如果文本输入不在模式中，则它在滚动期间保持焦点。
可以在上找到一个示例
输入没有什么特别之处，它尽可能地简单
<input type="text" id="textinput" name="textinput"/>
有没有办法在用户滚动时保持焦点？
谢谢
克里斯
浏览 1提问于2015-01-30得票数 1
我正试图为一个应用程序构建一个待办事项列表功能；但是，我很难把它做好。
基本上，我希望用户能够在输入时通过"submit“键或按钮创建新的列表项(两者都已经完成)。在创建新列表项时，我希望FlatList中的相应FlatList能够自动聚焦。这个works...up到了一定程度。一旦我创建了10个列表项，行为就停止正常工作，焦点不再放在新创建的下一个FlatList项上。
我已经知道，如果我改变"initialNumToRender“属性在FlatList中，并增加它超过10，它将解决问题，暂时，直到达到这个上限。但是，我不想降低我的FlatList的性能，我希望找到一个不同的
浏览 6提问于2021-08-10得票数 0
回答已采纳
当TextInput被聚焦时，用户滚动直到输入离开可见的框架，输入变得模糊，键盘消失。我该如何解决这个问题？ 我在Android模拟器中运行代码。在iOS上，这个问题不会发生。如果您尝试点击FlatList底部的TextInput，键盘会立即关闭，这可能是因为一旦键盘打开，输入内容就在键盘下方。任何线索都将不胜感激 下面是要重现的代码 import React from 'react';
import { TextInput, FlatList } from 'react-native';
export default class App extends R
浏览 37提问于2019-05-29得票数 12
是否有可能防止键盘在滚动FlatList时被丢弃？
当使用ScrollView时，将道具"keyboardDismissMode“设置为"none”是解决此问题的方法，但是在FlatList中，这并不适用于我.
我在一个自制的组件(即中)中使用FlatList，而它的头中有一个焦点化的TextInput。我将FlatList呈现如下：
<View style={{flex: 1}}>
<FlatList
style={{flex: 1}}
data={this.props.data}
keyExtractor={(item, in
浏览 2提问于2018-06-22得票数 3
回答已采纳
所以我有一个TextInput实例，如果焦点从True变为False，我希望它执行self.dispatch('on_text_validate')。
基本上，如果我不单击enter，其中多行= False，或选项卡，其中write_tab = False，而是如果用户单击屏幕上的其他地方，并且TextInput的焦点丢失，则执行'on_text_validate‘。
我对基维还不熟悉。这是用回调来实现的方法吗？
浏览 1提问于2016-03-13得票数 2
回答已采纳
1回答
是否有可能使键盘始终可见在屏幕上？
屏幕有：
(multiline)two FlatList one TextInput
当我在TextInput中键入某些内容时，它是可以的，但是当我将某些内容更改为FlatList时，键盘是隐藏的。
无论我在屏幕上做什么，我都希望键盘总是可见的。
我测试的是：
keyboardShouldPersistTaps='always'在开始时没有工作，我将autoFocus设置为TextInput，当键盘被隐藏时，每次更改都会再次显示。我想我可以这样做，这样过渡就看不见了，但是它不能工作，因为它应该是。
componentDidUpdate() {
浏览 0提问于2019-11-12得票数 3
目前，这个- ? 是SearchBar和FlatList在屏幕上的显示方式。单击SearchBar并键入其中一个列表组件后，它将显示以下内容- ? 道路。我希望仅当我单击SearchBar时才显示FlatList。我如何在应用中实现这一点？下拉搜索栏之类的东西。 import React from 'react';
import { View, Text, FlatList, ActivityIndicator, StyleSheet } from 'react-native';
import { SearchBar } from 'react-nat
浏览 9提问于2020-10-27得票数 2
回答已采纳
1回答
我想在react-native中创建一个搜索栏，如下所示： ? 如果我单击图标，我将焦点放在textInput上，但如果我单击屏幕的其他部分，则取消对textInput的焦点。 焦点部分与ref一起工作，但我不知道当我在屏幕的其他部分单击时是否可以取消对文本输入的焦点。 <TextInput
multiline={false}
onChangeText={(text) => onChangeText(text)}
placeholder="search"
style={styles.textInput}
value=
浏览 17提问于2020-07-24得票数 0
我有一个带有FlatList-child的屏幕。这个子类包含几个TextInputs和一些样式。我想在TextInputs的OnTextChange-function中更新父级状态。然而，在我目前的实现中，每当我在任何TextInputs中键入一个字符时，我都会失去焦点(键盘也会被忽略)。 如果我尝试在父屏幕中创建一个TextInput并更新每个onChangeText上的状态，那么一切都会正常工作。 以下是我的代码(删除了一些不重要的可视组件)： UserInfoScreen.js const onChangeText = (setUserInfo, userInfo) => (ba
浏览 14提问于2019-09-04得票数 0
我想做这个布局：
目前，我是这样做布局的：
菜单属于以下部分，而i marginTop：-30为其上面的图像FlatList是绝对视图，具有zIndex大于菜单的功能。FlatList有动态数据，FlatList的每一项都有textInput来搜索数据(查看此图)
我尝试过两种方法：First way:
用于列表过滤数据的，它受Flatlist区域的限制，因此我的筛选列表不能完全显示，只有2行可见，其余的过滤数据是不可见的。我试着增加Flatlist的高度，现在我可以完全看到过滤后的列表，但是我不能点击菜单按钮，因为菜单被Flatlist，Second way 覆盖，我使用Modal
浏览 1提问于2019-10-04得票数 0
这里有一个app.js的简单要点来重现这个问题
我有一个屏幕，其中有一个FlatList夹在页眉和页脚组件之间。FlatList有一些行，单击这些行时，它们会变成TextInputs。Flatlist可以很好地处理这个屏幕中的键盘，方法是滚动点击的行，使其就在键盘的上方。
问题是，页脚组件是在键盘上方提出来的，而不是被覆盖的。在编辑文本字段时，没有必要看到页脚，在实际用例中，页眉和页脚要大得多，因此严重限制了可用的屏幕不动产。它基本上将文本输入压缩到一个很小的行中，这几乎是不可用的。
TextInput UnFocused
TextInput聚焦(注意，页脚向上推)
我如
浏览 0提问于2018-06-22得票数 4
回答已采纳
1回答
当我第一次移动到屏幕上时，如何将数据放入“数据”中。仅当在搜索框中输入值时才有效。 这是我的代码： const resData = useSelector(state => state.products.products);
const [data, setData] = useState(resData); 搜索功能 const SearchFilterFunction = text => {
const newData = resData.filter(item => {
const itemData = item.productName
浏览 8提问于2020-04-11得票数 0
回答已采纳
我有一个名为MDropDowlList的组件，它呈现以下视图：
MDropDownList.js
render() {
return (
<View>
<View
style={{
backgroundColor: '#fff',
position: 'absolute',
left: 0,
right: 0
浏览 0提问于2019-07-11得票数 0
import React from 'react';
import {SafeAreaView, KeyboardAvoidingView, FlatList, View, Text, TextInput, Button, StyleSheet } from 'react-native';
export default class Guest extends React.Component {
state={
command: '',
}
constructor(props) {
sup
浏览 4提问于2018-09-12得票数 6
回答已采纳
如何知道在react原生textInput中焦点何时丢失？
例如，当用户在textInput外部触摸时，它失去了焦点，我想要执行一个操作。
浏览 4提问于2017-04-14得票数 32
回答已采纳
我正在根据服务器的数据呈现一个动态列表。如果onSubmitEditing事件被触发，那么FlatList中的下一个组件应该是聚焦的。我试着使用refs来聚焦动态表单，但是它不合适(下一个输入是没有焦点)。若要标识FlatList中的项，请使用索引。
<FlatList
ref={ref => this.flatList = ref}
data={this.state.articles}
renderItem={({item,index}) => this.renderItem(item, index)}
keyExtractor={(item, index)
浏览 0提问于2019-02-11得票数 0
return(
<View style={styles.container}>
<View style={styles.searchbarContainer}>
<TouchableOpacity style={styles.ThreeLineButton} onPress={returnHome}>
<Text style={{color: 'white', fontSize: 20,}}>Done</Text>
</Touchab
浏览 1提问于2022-04-24得票数 0
2回答
我是新手在react原生，我正在做一个注释块，现在的问题是，一旦我点击保存，它保存到数组，但当我回到主屏幕，在那里我显示保存的笔记，它不会显示最后一个，直到我重新加载整个项目，我怎么做才能重新渲染它？我已经看到我必须使用this.forceUpdate()，但是它也不能工作，下面是代码：
这是主屏幕，用户将看到的第一个屏幕，它显示了调用component notes保存的注释
render() {
return (
<>
<View style = {this.styles.container}>
<
浏览 0提问于2020-08-08得票数 0
我正在为一个项目创建一个小小的twitter墙，并经历了一个奇怪的问题。我有以下意见：
<Animated.View style={[{flex: 1}, {marginBottom: this.bottomOffset}]}>
<FlatList
...
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps="always"
... />
<View style={{
flexDirection: &#
浏览 0提问于2018-07-12得票数 1
回答已采纳
我有一个TextBox组件，它在我的中呈现一个输入框。它使用反应-原生纸：
import * as React from 'react';
import {View} from 'react-native';
import {TextInput} from 'react-native-paper';
const TextBox = () => {
const [text, setText] = React.useState('');
return (
<View>
<TextI
浏览 9提问于2022-04-20得票数 3
我有一个调用renderItem方法的FlatList，这个方法返回一个包含TextInput的组件。我希望设置文本输入的onSubmitEditing方法，以便将焦点设置在下一个输入上。 FlatList： <FlatList
data={this.state.itens}
keyExtractor={(i) => `${i.IdBalancoItem}`}
renderItem={this.renderItem}
/> renderItem： renderItem = (ItemBalanco) => {
const { item, index
浏览 18提问于2020-11-20得票数 0
我要在文本输入中设置焦点。开始时焦点设置正确，但当我转到下一个屏幕并返回到初始屏幕时，焦点设置不正确。
这是一个带有rfid选择器的应用程序，我想读取一个代码并选择enter或exit。
main.py
import kivy
kivy.require('1.10.0') # replace with your current kivy version !
from kivy.app import App
from kivy.core.window import Window
from kivy.uix.screenmanager import ScreenManager,
浏览 0提问于2019-05-28得票数 1
回答已采纳
我在ScrollView中有一个TextInput和TouchableOpacity，如下所示：
<ScrollView keyboardShouldPersistTaps={'handled'}>
<TextInput
placeholder='Text'
value={this.state.value}
onChangeText={value => this.setState({ value })}
onBlur={() => console.log(&#
浏览 13提问于2021-07-29得票数 0
1回答
我有一个反应本机纸TextInput，当我导航到一个屏幕时，我想自动聚焦它(使用react-本地导航)。我尝试过将autoFocus={true}设置在TextInput上，但这没有起作用。
在另一次尝试中，我试图通过监听屏幕上的“焦点”事件来手动调整焦点，但这只是在我第一次打开屏幕时才对其进行聚焦。有什么办法让它可靠地工作吗？
export default function NewAccountScreen({ navigation }) {
const [name, setName] = useState('');
const textInputRef = cre
浏览 3提问于2021-09-10得票数 1
回答已采纳
1回答
饮食(屏幕)
export class Diet extends Component {
constructor(props) {
super(props);
this.state = {
foodList: [],
};
}
render() {
return (
<View>
<List>
<FlatList
data={this.props.route?.params?.fo
浏览 3提问于2021-05-03得票数 0
回答已采纳
1回答
不更新数组
、、、、
添加项目屏幕
export class additem extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
price: "",
category: "",
};
}
submitItem = (name, price, category) => {
this.props.navigation.navigate("ItemList",
浏览 2提问于2021-06-18得票数 1
我是一名React Native初学者，我正在使用平面列表和自定义行。在每个定制行中，我都有像Text、TextInput和Button这样的元素。问题是，我需要按下这些按钮中的一个来启用并触发对TextInput的焦点。
我试着用，refs，来实现它，但是所有的东西都冻结了，所以我不知道该怎么做才对。
My构造函数
class EditProfileScreen extends React.Component {
constructor(props) {
super(props);
this._rowRefs = {}
}
My FlatList和MyCustomRo
浏览 28提问于2019-05-28得票数 0
1回答
我的FlatList没有显示任何错误，但没有呈现我给它的数据。redux数组工作正常，正在向其中添加项，但FlatList不会将它们渲染到屏幕上。
不管我给它的样式是flex: 1还是屏幕宽度，这两者都没有区别。我不确定是我提供的数据出了问题，还是renderItem出了问题。我有预感，这是redux将数组传递给FlatList的方式的问题，但我不确定。
我的主要todo组件的FlatList配置：
render() {
return (
<View style={{ height: HEIGHT }}>
<ScrollView>
浏览 2提问于2019-07-17得票数 0
使用以下代码：
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
class Main(App):
def build(self):
root = FloatLayout(size=(100, 100))
root.add_widget(TextInput(pos=(0, 0)))
root.add_widget(TextInput(pos=(50, 50)))
浏览 0提问于2017-02-01得票数 3
1回答
我真的很难让KeyboardAvoidingView正常工作。
我想把它包装在一个评论的FlatList和一个添加新评论的TextInput中。当键盘处于活动状态时，两个元素都应该向上移动。如果你使用Instagram，与他们的评论屏幕完全一样。
然而，无论我怎么尝试，只有TextInput被向上移动，超过了评论。
<View style={{ flex: 1 }}>
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={65} style={{ flex:
浏览 0提问于2017-10-06得票数 0
在React导航中，即使更改了屏幕，屏幕似乎仍然存在。然而，在React本机导航中，所有屏幕在再次获得焦点后似乎都会刷新，这使得数据很难持久化，并降低了用户体验，特别是在使用FlatList时。因此，我想知道是否有方法来防止这种情况。谢谢!
浏览 30提问于2020-11-23得票数 2
回答已采纳
1回答
我有一个带有id="textarea“的内容可编辑的div，我还有几个按钮可以在光标位置插入不同的文本/符号。当我单击textarea div外部(按钮内部的文本)时，会出现此问题；文本/符号正在插入到div之外。我怎么才能阻止这一切？我能把注意力集中到那个地方吗？我只有一个文本区域，虽然我可能有更多在未来。
为了插入，我在另一个线程上使用了Tim建议的代码：
这是我的文本区域和按钮的代码。
<div id="textarea" contenteditable="true">
<style scoped>
浏览 4提问于2013-11-15得票数 0
回答已采纳
这应该用来跟踪用户输入的项目列表。列表最初是空的。用户可以输入项目名称和项目数量，然后按下“添加项目”按钮。有什么想法吗?如何通过onPress传递一个函数，使用户输入的项目在屏幕上显示？
import React, {useState} from 'react';
import { Text, StyleSheet, View, TextInput, Button, FlatList } from 'react-native'
const ItemListScreen = () => {
const [userInput, setUs
浏览 1提问于2022-10-05得票数 0
this.state={
task : "",
the_array : []
};
}
handleTextChange=(some_task) =>{
this.setState({
task : some_task
});
}
pushToList = () => {
let taskitem = {
name: this.state.task,
};
this.setState({
the_array: [...th
浏览 8提问于2019-10-22得票数 0
回答已采纳
4回答
我正在尝试有一个弹出窗口与一个立即可编辑的TextInput。这意味着一旦显示弹出窗口，用户就应该能够在TextInput中键入内容。
问题是我不能专注于textInput。发生的情况是，当第一次按下一个键时，不会插入任何文本，只有在按下第二个键之后，组件才会获得焦点，并且用户能够键入。例如，一旦弹出窗口打开，输入"test“将导致显示"est”...
出于某些原因，只有当用户显式地单击组件或键入某些内容时，组件才会获得焦点。编程设置焦点不起作用。
有什么想法/建议吗？
代码：
<?xml version="1.0" encoding="utf-8
浏览 0提问于2010-07-27得票数 5
回答已采纳
当TextInput焦点和安卓键盘打开时，需要在键盘上方的屏幕上居中TextInput。是谁做的？
浏览 0提问于2016-02-18得票数 3
2回答
描述
从下面的示例代码中，FlatList返回TextInput的n个数字，当在特定的TextInput上输入值时，它会不断地重新呈现每一个其他的TextInput。
样本码
<FlatList
...........
renderItem ={this.renderItem}
/>
renderItem=(item)=>{
<Text>{item.name}</Text>
<TextInput
.........
onChangeText ={(text)=>this.setState({tex
浏览 0提问于2018-07-06得票数 2
回答已采纳
我有一个使用WPF TextInput事件的自定义控件。这在使用键盘时可以很好地工作；但是，如果使用"Tablet PC输入面板“(随Windows7提供)的手写识别，则在单击”插入“按钮时不会发生TextInput事件。
public partial class Window1 : Window
{
public Window1()
{
}
protected override void OnTextInput(TextCompositionEventArgs e)
{
base.OnTextInput(e);
浏览 0提问于2010-11-19得票数 6
我将尽力解释我的情况：
我有2页/屏幕
SreenA.js :
...
<FlatList>
</FlatList>
...
ScreenB.js :
...
<Button> This button for back to ScreenA </Button>
...
我想要达到的目标:
当我按下screenB中的后退按钮时，我的应用程序将返回到screenA。当我回到screenA时，我需要刷新FlatList。(每次我回到screenA)。
我是如何在Android原住民?中实现这种情况的
我增加这一节是为了帮助你更好地理解我面临的
浏览 0提问于2018-10-27得票数 6
我使用React的，将行为设置为填充(在Android上进行测试)。
我的屏幕上有多个TextInputs。当我单击最终的TextInput时，键盘就会覆盖它。我现在可以滚动下来，因为填充从KeyboardAvoidingView，但它是理想的让它自动滚动焦点。
<Content>
<KeyboardAvoidingView behavior='padding'>
<TextInput placeholder='Example 1' />
<TextInput placeholder='Exa
浏览 18提问于2017-05-08得票数 32
回答已采纳
1回答
如何关注离子输入
、、、
你好，我是离子/角质的新手。
这是Ionic4中的一个小项目，我想获得一个IonInput焦点状态。
我已经看了一段时间的文档和论坛，但没有找到一些帮助我的东西。
我知道有一个事件在输入有焦点时触发，但它不能告诉我输入是否在给定时刻集中。
我正在寻找的是类似于Ionic 3的东西，当您可以用TextInput来完成这个任务时：
let hasFocus = textInput.isFocus();
浏览 1提问于2021-06-17得票数 0
回答已采纳
这是我的JSON文件 {
"name": "Thịt bò",
"noed": 5
},
{
"name": "Thịt heo",
"noed": 3
} 我把它们放到Flatlist上 <FlatList
data={cats}
keyExtractor={item => item.name}
renderItem={({item})=>(
<View>
浏览 20提问于2019-03-19得票数 1
我正在使用jquerymobile进行UI设计。我的问题是Jquery中的文本输入在周围浮动。让我告诉你我的意思
这是我的屏幕
现在选择4 is和EditText(Android) /(Jquery)，我在它的上输入
现在，如果我试图滚动屏幕，我可以看到输入文本在屏幕上浮动，
，但是如果TextInput失去了焦点，那么它的就很精细
，但是当您再次选择TextInput时，问题再次发生
谁能告诉我这个问题的解决方案
浏览 0提问于2014-05-22得票数 0
回答已采纳
我想得到TextInput的值并添加到我的flatList中:这是我的TextInput
<TextInput style={styles.input}
underlineColorAndroid="transparent"
placeholder=" Money "
placeholderTextColor="#9a73ef"
autoCapitalize="none"
keyboardType='
浏览 2提问于2021-01-13得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
