将 renderItem 作为 prop 传递给组件时，FlatList 项目内的函数不会触发

Question

当按下 FlatList 组件内的列表项时，onPress 事件不会以某种方式触发。我有一个使用 Autocomplete 组件的主要组件。此 Autocomplete 组件由 TextInput 和 FlatList 组成 View:

//Autocomplete component
//...
return (
    <View>
        <TextInput
            value={props.value}
            onChangeText={props.onChangeText}
            onFocus={props.onFocus}
            onBlur={props.onBlur}
        />
        <FlatList
            data={props.data}
            keyExtractor={item => item.id}
            renderItem={props.renderItem}/>
    </View>
)

主组件向Autocomplete组件传递了一个renderItem属性，我想在其中按下列表中的一个项目时调用一个函数：

//main component
//...
const selectHandler = (item) => {
    console.log("test")
};

return(
<Autocomplete
    data={filteredData}
    value={searchTerm}
    renderItem={itemData => (
        <TouchableOpacity
            onPress={(item) => selectHandler(item)}>
            <Text>
                some text
            </Text>
        </TouchableOpacity >
    )}
    onChangeText={text => setSearchTerm(text)}
    onFocus={focusHandler}
    onBlur={blurHandler}
/>
)

但是，这个 console.log("test") 永远不会触发。这可能是什么原因？

Answer 1

在 FlatList 中尝试 renderItem={() => props.renderItem}/>。

Answer 2

找到原因了。因为使用 TextInput I need to add keyboardShouldPersistTaps={'handled'} 到 FlatList 组件时键盘是打开的。我没有看到我最初必须点击两次，因为我的 Autocomplete 组件消失了 onBlur 我认为 onPress 事件根本不起作用。

将 renderItem 作为 prop 传递给组件时，FlatList 项目内的函数不会触发

Function inside a FlatList item does not fire when passing the renderItem as prop to the component

event-handling

reactjs

react-native

react-native-flatlist