Управление выбранным стилем элемента с помощью React Native State в группе элементов

Я обновляю свое приложение для напоминаний о воде, в котором пользователь выбирает один тип напитка, а затем количество выпитого.

Что я пытаюсь сделать, так это то, что у меня есть массив, содержащий напитки, и я сопоставляю этот массив, чтобы отобразить их. Мне нужно, чтобы пользователь выбрал, какой напиток он хотел бы выпить. После выбора я хотел бы изменить его стиль, чтобы выделить выбранный напиток.

Я пробовал вложенный объект с состоянием 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>
  );
});
};

Так работает или нет? С какой именно проблемой вы столкнулись? Как скриншот помогает мне понять проблему? Просьба уточнить.

Yannick K 03.06.2019 00:22

Я отредактировал свой вопрос и уже сам решил свою проблему. Спасибо @YannickK

sinan 03.06.2019 00:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
278
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Что я сделал, так это создал выбранное состояние с пустой строкой. Каждый раз, когда нажимается любой элемент, я устанавливаю состояние с названием напитка, а затем сравниваю выбранное состояние с названием напитка. Если оно соответствует стилю, применяется к выбранному напитку.

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>
  );

Другие вопросы по теме