Я обновляю свое приложение для напоминаний о воде, в котором пользователь выбирает один тип напитка, а затем количество выпитого.
Что я пытаюсь сделать, так это то, что у меня есть массив, содержащий напитки, и я сопоставляю этот массив, чтобы отобразить их. Мне нужно, чтобы пользователь выбрал, какой напиток он хотел бы выпить. После выбора я хотел бы изменить его стиль, чтобы выделить выбранный напиток.
Я пробовал вложенный объект с состоянием selectedDrink, но, насколько я читал здесь, вложенные объекты не подходят для производительности в React.
Когда я использую выбранное состояние и когда любой из них щелкнут, все их стили меняются.
state = {
selected: false
selectedDrink: {
Water: false,
Coffee: true,
Tea: false,
},
};
drinkList = (begin, end) => {
drinks = [
'Water',
'Coffee',
'Tea',
];
drinks = drinks.slice(begin, end);
return drinks.map(data => {
const imageLinks = {
Water: require('../assets/images/Water.png'),
Coffee: require('../assets/images/Coffee.png'),
Tea: require('../assets/images/Tea.png'),
};
{
if (data === 'Water') {
image = <Image style = {styles.drinkImages} source = {imageLinks.Water} />;
} else if (data === 'Coffee') {
image = <Image style = {styles.drinkImages} source = {imageLinks.Coffee} />;
} else if (data === 'Tea') {
image = <Image style = {styles.drinkImages} source = {imageLinks.Tea} />;
} else {
image = <Image style = {styles.drinkImages} source = {imageLinks.Water} />;
}
}
return (
<View style = {styles.drinkContainer}>
<TouchableOpacity
onPress = {() => {
this.setState({ selected: !this.state.selected });
}}
//this is where I would like to change style based on state
style = {[
styles.drinkButtonContainer,
this.state.selected ? styles.drinkSelectedButtonContainer : null,
]}
>
{image}
</TouchableOpacity>
<Text style = {styles.infoTextStyle}>{data}</Text>
</View>
);
});
};
Я отредактировал свой вопрос и уже сам решил свою проблему. Спасибо @YannickK



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Что я сделал, так это создал выбранное состояние с пустой строкой. Каждый раз, когда нажимается любой элемент, я устанавливаю состояние с названием напитка, а затем сравниваю выбранное состояние с названием напитка. Если оно соответствует стилю, применяется к выбранному напитку.
state = {
selected: '',
};
return (
<View style = {styles.drinkContainer}>
// I set the state to drink name
<TouchableOpacity
onPress = {() => {
this.setState({ selected: data });
}}
// Then compare drink name with selected state and apply styling
style = {[
styles.drinkButtonContainer,
this.state.selected === data ? styles.drinkSelectedButtonContainer : null,
]}
>
{image}
</TouchableOpacity>
<Text style = {styles.infoTextStyle}>{data}</Text>
</View>
);
Так работает или нет? С какой именно проблемой вы столкнулись? Как скриншот помогает мне понять проблему? Просьба уточнить.