Функция внутри элемента FlatList не срабатывает при передаче renderItem в качестве реквизита для компонента

Question

Почему-то событие onPress не вызывается при нажатии на элемент списка внутри компонента FlatList. У меня есть основной компонент, который использует компонент 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>
)

Основной компонент передает renderItem реквизит компоненту Autocomplete, в котором я хочу чтобы вызвать функцию при нажатии элемента в списке:

//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

Я нашел причину. Поскольку клавиатура открыта при использовании TextInput , мне нужно добавить keyboardShouldPersistTaps={'handled'} к компоненту FlatList. Я не видел, что сначала нужно дважды щелкнуть, потому что мой Autocomplete компонент исчезает onBlur, и я подумал, что событие onPress вообще не работает.

Answer 2

Попробуйте renderItem={() => props.renderItem}/> в FlatList.