Динамически изменять функцию обработчика onPress в реактивном нативе
Есть ли способ динамически изменить обработчик функции onPress в <FlatList>? У меня есть три функции onPress, которые мне нужно передать через массив. Как я могу динамически обновить функцию или имя функции, которое передается <TouchableOpacity> (см. мой код ниже)?
Мой входной массив:
const menu = [
{
"id": 1,
"route": "this.onBottonPressedHome.bind(this)",
"info": "1"
},
{
"id": 2,
"route": "this.onBottonPressedSettings.bind(this)",
"info":"2"
},
{
"id": 3,
"route": this.onBottonPressedHistory.bind(this)",
"info": "3"
}
]
Мой плоский список:
<FlatList
horizontal = {true}
data = {menu}
keyExtractor = {item => item.id.toString()}
showsHorizontalScrollIndicator = {false}
renderItem = {({ item, index }) => (
<TouchableOpacity
onPress = {item.route}
>
<Card>
<CardItem style = {{ backgroundColor: '#37BBE1'}}>
<Body>
<View style = {{ paddingTop: 10, width: 135 }}>
<Text style = {{ fontSize: 12, textAlign:'justify', color: '#fff' }}>
{item.info}
</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
Когда я это делаю, я получаю сообщение об ошибке, указывающее, что bind не определено в массиве. Как я могу это решить?
Обновлять:
Я добился этого с помощью тернарных операторов, это хорошо? Создаст ли это какие-либо проблемы с производительностью?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если я правильно понимаю, ваш массив menu состоит из элементов объекта, которые имеют поля строкового значения (т.е. нет привязок «настоящих» функций).
Предполагая, что это ограничение, которое вам нужно обойти, вы можете рассмотреть другой подход к этой проблеме, где вместо динамической передачи обработчика onPress во время рендеринга вы вместо этого динамически разрешаете обработчик во время события следующим образом:
render() {
/* This handler dynamically selects the action to call, based on the "item"
that the user has pressed */
const onPressItemHandler = (item) => {
switch(item.id) {
case 1: {
this.onBottonPressedHome();
break;
}
case 2: {
this.onBottonPressedSettings();
break;
}
case 3: {
this.onBottonPressedHistory();
break;
}
}
}
return <FlatList
horizontal = {true}
data = {menu}
keyExtractor = {item => item.id.toString()}
showsHorizontalScrollIndicator = {false}
renderItem = {({ item, index }) => (
<TouchableOpacity
onPress = { () => onPressItemHandler(item) }>
<Card>
<CardItem style = {{ backgroundColor: '#37BBE1'}}>
<Body>
<View style = {{ paddingTop: 10, width: 135 }}>
<Text style = {{
fontSize: 12,
textAlign:'justify',
color: '#fff' }}>
{item.info}
</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>)} />
}
Хороший! Тернарные операторы хороши, хотя они могут затруднить чтение кода, если вам нужно рассмотреть много id случаев.
Спасибо за предложение!
Он работает, я пробовал с троичным, он тоже работает! но есть ли в этом что-то неправильное?