Блог

Как я могу выделить одну кнопку, окруженную несколькими кнопками?

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

  const button = [
    {
        title: '#Food',
        selected: false,
        id: 1
    },
    {
        title: '#Fashion',
        selected: false,
        id: 2
    },
    {
        title: '#Art',
        selected: false,
        id: 3
    }]

 {button.map(({ title, id, selected }) => {
                return (
                    <View style={{ width: '25%', padding: 5, }}>
                        <CustomButton
                            bgColor={active ? 'red' : 'blue'}
                            title={title}
                            key={id}
                            onPress={() => chosenButton(selected, id)}
                            textColor={Colors.PRIMARY_COLOR} />
                    </View>
                )
            })}
 

Вот моя пользовательская кнопка

     const CustomButton = ({ title, containerStyle, textStyle, bgColor, textColor, onPress }) => {
    return (
        <Button onPress={onPress} block rounded style={[styles.btnStyle, containerStyle, { backgroundColor: bgColor, }]}>
            <Text style={[styles.text, textStyle, { color: textColor }]}>{title}</Text>
        </Button>
    );
};
 

На данный момент, вот мои кнопки

Но я хочу выделить одну кнопку и изменить цвет ее фона при нажатии. Как я могу это сделать?

Вы могли бы сделать useState это в дочернем компоненте и изменить цвет при нажатии

  const CustomButton = ({ title, containerStyle, textStyle, bgColor, textColor, onPress }) => {
    const [bgCol,setBgCol] = useState(bgColor);
    const changeBg = () => setBgCol('yellow');

    return (
        <Button onPress={()=>{changeBg();onPress()}} block rounded style={[styles.btnStyle, containerStyle, { backgroundColor: bgCol, }]}>
            <Text style={[styles.text, textStyle, { color: textColor }]}>{title}</Text>
        </Button>
    );
};
 

Чтобы сохранить selected значение в buttons массиве, вы можете сделать следующее

 const [button, setButton] = useState([
    {
        title: '#Food',
        selected: false,
        id: 1
    },
    {
        title: '#Fashion',
        selected: false,
        id: 2
    },
    {
        title: '#Art',
        selected: false,
        id: 3
    }]);

const handleButtonClick = (index) => {

  const newData = [...button];
  newData[index].selected = !newData[index].selected;
  setButton(newData);

}



{button.map(({ title, id, selected }, index) => {
                return (
                    <View style={{ width: '25%', padding: 5, }}>
                        <CustomButton
                            bgColor={selected ? 'red' : 'blue'}
                            ....
                            onPress={() => handleButtonClick(index)}
                    />
                    </View>
                )
})}