Я пытаюсь сделать так, чтобы при нажатии TouchableHighlight в react native он переходил от одного цвета к другому. У меня есть состояние, которое имеет значение false и изменяется при нажатии кнопки. Однако это изменяет цвет для всех элементов на карте, а не для каждого элемента по отдельности. Есть ли способ независимо обновлять состояние каждого элемента? Вот мой код:

function OnboardingVibes() {
  const [pressed, setPressed] = useState(false);
  return (
      <View style={{marginTop: 40}}>
        <Text style={{fontSize: 22, color: '#FFF', marginBottom: 16}}>Vibes</Text>
        <View style={styles.buttonContainer}>
          {vibes.map((vibe) => {
            return (
                <TouchableHighlight onPress={() => setPressed(true)} style={{backgroundColor: pressed ? '#DDD' : '#4D2C5B', margin: 4, borderRadius: 4}} key={`vibe-${vibe}`}>
                  <Text style={styles.vibeButton}>{vibe}</Text>
                </TouchableHighlight>
            )
          })}
        </View>
      </View>
  );
}
0
Oliver Darby 17 Сен 2021 в 20:00

3 ответа

Лучший ответ

Один из способов сделать это - переместить состояние вниз, чтобы у вас были отдельные состояния. Когда состояние верхнего уровня равно true, все дочерние компоненты получат одно и то же состояние.

function TouchableVibe({vibe}) {
  const [pressed, setPressed] = useState(false);

  return (
    <TouchableHighlight
      onPress={() => setPressed(true)}
      style={{
        backgroundColor: pressed ? "#DDD" : "#4D2C5B",
        margin: 4,
        borderRadius: 4,
      }}
    >
      <Text style={styles.vibeButton}>{vibe}</Text>
    </TouchableHighlight>
  );
}

function OnboardingVibes() {
  return (
    <View style={{ marginTop: 40 }}>
      <Text style={{ fontSize: 22, color: "#FFF", marginBottom: 16 }}>
        Vibes
      </Text>
      <View style={styles.buttonContainer}>
        {vibes.map((vibe) => (
          <TouchableVibe key={`vibe-${vibe}`} vibe={vibe} />
        ))}
      </View>
    </View>
  );
}
1
Shawn Yap 17 Сен 2021 в 17:27
const [pressed, setPressed] = useState(vibes.map(e=>false));
{vibes.map((vibe, index) => {
           return (
               <TouchableHighlight onPress={() => {
let new_Pressed =vibes.map(e=>false)
    new_pressed[index]=true;
setPressed(new_pressed);
}} 
style={{backgroundColor: pressed[index] 
                ? '#DDD' 
                : '#4D2C5B',
                margin: 4, borderRadius: 4}} key={`vibe-${vibe}`}>
                 <Text style={styles.vibeButton}>{vibe}</Text>
               </TouchableHighlight>
           )
         })}
0
Ankush Verma 17 Сен 2021 в 17:24

Вместо того, чтобы передавать логическое значение в состояние, передайте вместо этого id/vibe, а затем в своей условной логике в map вы можете определить, совпадает ли этот единственный элемент с тем, который вы щелкнули .

function OnboardingVibes() {
  const [pressed, setPressed] = useState('');
  return (
      <View style={{marginTop: 40}}>
        <Text style={{fontSize: 22, color: '#FFF', marginBottom: 16}}>Vibes</Text>
        <View style={styles.buttonContainer}>
          {vibes.map((vibe) => {
            return (
                <TouchableHighlight onPress={() => setPressed(vibe)} style={{backgroundColor: pressed === vibe ? '#DDD' : '#4D2C5B', margin: 4, borderRadius: 4}} key={`vibe-${vibe}`}>
                  <Text style={styles.vibeButton}>{vibe}</Text>
                </TouchableHighlight>
            )
          })}
        </View>
      </View>
  );
}
0
TR3 17 Сен 2021 в 17:27