我正在尝试在React Native的列表中做一个搜索栏。
我有一个功能组件,里面有另一个函数_searchFilter
,用于过滤要显示在清单上的数据,但是我的SearchBar组件位于我的navigationOptions中的stacknavigator头上,例如
function VoltAQUI (props) {
const { markers, fetchMarkers } = props
const [data, setData] = useState({})
const [loading, setLoading] = useState(false)
useEffect(() => {
fetchMarkers({
location: 'Av.+Paulista,+171',
distance: 1
})
console.log('fetching')
}, [])
useEffect(() => {
if (markers.length === 0) {
setLoading(true)
} else {
setData(markers)
setLoading(false)
console.log('fetched')
}
}, [markers.length])
this._searchFilter = text => {
const newData = markers.filter(item => {
const itemData = `${item.name.title.toUpperCase()}`
const textData = text.toUpperCase()
return itemData.indexOf(textData) > -1
})
setData(newData)
}
return (
<Container>
<ListContainer>
{loading ? (
<ActivityIndicator size='large' />
) : (
<FlatList
data={data}
renderItem={({ item }) => (
<ListMapItem
handleClick={() => { console.log() }}
title={item.name}
address={item.address}
cashback={item.cashback}
/>
)}
keyExtractor={(item, index) => index.toString()}
/>
)}
</ListContainer>
</Container>
)
}
VoltAQUI.navigationOptions = () => ({
headerRight:
<SearchBarHeader
placeholder='Exemplo: Avenida Paulista 171'
onChangeText={text => VoltAQUI()._searchFilter(text)}
/>
})
VoltAQUI.propTypes = {
markers: PropTypes.array,
fetchMarkers: PropTypes.func
}
VoltAQUI.defaultProps = {
markers: []
}
const mapStateToProps = state => ({
markers: state.voltaQui.markers
})
const mapDispatchToProps = { fetchMarkers }
const addReduxProps = connect(mapStateToProps, mapDispatchToProps)
export default addReduxProps(VoltAQUI)
这将返回我,并且错误:props is undefined
。
如何在_searchFilter
的{{1}}道具上调用onChangeText
函数?