React Native: измените и сохраните цвет фона только элемента onPressed внутри Flatlist

Мне удалось изменить цвет фона кнопки onPressed внутри Flatlist, назначив item.id состоянию. Моя проблема в том, что когда я нажимаю другую кнопку, ранее нажатая кнопка возвращается к исходному фоновому цвету. Как я могу сохранить новый фоновый цвет, даже когда я нажимаю другую кнопку?

 onPressButtonarrived(item.id) {
    this.setState({ disablearrived: item.id })
    this.setState({ colorarrived: item.id })
  }


<View style = {{backgroundColor: item.id === this.state.colorarrived ? '#D6D6D6' : '#E5C454'}}>
    <TouchableOpacity
    onPress = {() => {this.onPressButtonarrived(item.id)}} disabled = {item.id === this.state.disablearrived ? true : false}>
    <Text>Arrival</Text>
</TouchableOpacity>

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

— 07.08.2019 14:53

javascript reactjs react-native

24.01.2019 15:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

804

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вам нужно иметь некоторые значения состояния для каждого элемента:

 onPressButtonarrived(item.id) {
        this.setState({ [item.id +'-disablearrived']: !this.state[item.id] });
        this.setState({ [item.id +'-colorarrived']: !this.state[item.id] });
        // that should toggle some true false vars for each item.id 
      }


    <View style = {{backgroundColor: this.state[item.id +'-colorarrived'] ? '#D6D6D6' : '#E5C454'}}>
        <TouchableOpacity
        onPress = {() => {this.onPressButtonarrived(item.id)}} disabled = {!!this.state[item.id +'-disablearrived']}>
        <Text>Arrival</Text>
    </TouchableOpacity>

Работает, как шарм! Спасибо за это, приятель. Мне пришлось изменить !state[item.id] на !this.state[item.id] в функции, но это помогло!

— 24.01.2019 17:11

Я обновил ответ небольшой настройкой this.state . Я рад, что проблема решена.

— 24.01.2019 18:14

24.01.2019 16:14