изменить цвет при нажатии кнопки и отменить выбор других параметров - PullRequest
Новая
       50

изменить цвет при нажатии кнопки и отменить выбор других параметров

0 голосов
/ 29 мая 2020

У меня есть 5 вариантов, которые я обернул touchableopacity. Я бы хотел, чтобы при нажатии одной опции цвет становился зеленым. Если я выберу другой вариант, предыдущий вариант станет серым, а новый - зеленым. Может кто-нибудь помочь мне закодировать это? Я не хочу писать кучу операторов IF. Я чувствую, что это плохой код, и есть более быстрый способ достичь своей цели. Не обращайте внимания на функцию Alert, которая у меня была только тогда, когда я изначально настраивал touchableopacity. 

const [angryColor, setAngryColor] = useState('grey')
    const [sadColor, setEmojiSad] = useState('grey')
    const [neutral, setNuetral] = useState('grey')
    const [happyColor, setHappyColor] = useState('grey')
    const [laughColor, setLaugh] = useState('grey')

 function toggleAngry(){
     if (angryColor === 'grey'){
         setAngryColor('green')
     } else {
         setAngryColor('grey')
     }
    }


    return(
        <View style={styles.screen}>
            <View style={styles.container}>
                <View style={styles.emojiView}>
                    <TouchableOpacity onPress={() => toggleAngry()}>
                        <FontAwesome5 name="angry" size={40} color={angryColor}/>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => Alert.alert('clicked')}>
                        <Entypo name="emoji-sad" size={40} color={sadColor}/>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => Alert.alert('clicked')}>
                        <Entypo name="emoji-neutral" size={40} color={neutral} />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => Alert.alert('clicked')}>
                        <Entypo name="emoji-happy" size={40} color={happyColor}/>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => Alert.alert('clicked')}>
                        <FontAwesome5 name="laugh-beam" size={40} color={laughColor} />
                    </TouchableOpacity>
                </View>

1 Ответ

1 голос
/ 29 мая 2020

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

const EmojiInput = (props) => {
  const [selected, setSelected] = React.useState(0);

  const onItemSelected=emoji=>{
    setSelected(emoji);
    if(props.callback){
      props.callback(emoji);
    }
  };

  return (
    <View style={styles.emojiView}>
      <TouchableOpacity onPress={() => onItemSelected(1)}>
        <FontAwesome5 name="angry" size={40} color={selected==1?'red':'grey'} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onItemSelected(2)}>
        <Entypo name="emoji-sad" size={40} color={selected==2?'red':'grey'} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onItemSelected(3)}>
        <Entypo name="emoji-neutral" size={40} color={selected==3?'red':'grey'} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onItemSelected(4)}>
        <Entypo name="emoji-happy" size={40} color={selected==4?'red':'grey'} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onItemSelected(5)}>
        <FontAwesome5 name="laugh-beam" size={40} color={selected==5?'red':'grey'} />
      </TouchableOpacity>
    </View>
  );
};
...