React本地TextInput在我键入一个字符之后一直不关注和刷新整个页面

Question

return(
        <View style={styles.container}>
      <View style={styles.searchbarContainer}>
        <TouchableOpacity style={styles.ThreeLineButton} onPress={returnHome}>
          <Text style={{color: 'white', fontSize: 20,}}>Done</Text>
        </TouchableOpacity>
        {/* <Text style={{color: 'white', fontSize: 50, marginLeft: 50}}>UStudy</Text> */}
        {/* <TextInput style={styles.searchbarStyle} placeholder="Search Ustudy" placeholderTextColor='#FFF' onChangeText={setSearchText} value={searchText} onChange={refreshSearch} /> */}
        
      </View>
      <ScrollView
      refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <FlatList
                ref={(ref) => { this.commentListRef = ref; }}
                data={allComments}
                renderItem={({item}) => <CommentCard item={item} />}
                keyExtractor={item=>item.docID}
                showsVerticalScrollIndicator={false}
                style={{
                width: '110%',
                }}

                refreshControl={
                <RefreshControl
                    refreshing={refreshing}
                    onRefresh={onRefresh}
                />
                }
            />
      </ScrollView>
      </View>
    );
};

export default DynamicPostScreen

这是我的UI的代码以及如何嵌入TextInput。每当我在文本输入中键入字符时，它都会刷新整个页面，并从文本输入中不关注。如何阻止这种情况发生？

Answer 1

不幸的是，您没有提供组件的完整代码。我建议您对组件进行重新处理，并给予适当的格式，尤其是凹痕。

另外，您通常不希望在滚动浏览中列入列表，那里可能有一个问题。

关于问题本身，没有完整的代码，我不能100％确定。

但是，您的setSearchText可能会触发USESTATE变化，因此可以重新启动组件（这就是状态的作用）。

这是一个状态管理问题，您可以将TextInput移至单独的组件并从那里管理状态，以使父组件无法启用。

另一种可能性是，通过使用OnchangeText和Onchange，您可能会触发渲染，可能会使用RefreshSearch函数。

如果这没有帮助，请在一开始就按照我的指示进行操作，我很高兴再次查看。