如何在本机反应中突出显示单个按钮？答案

【问题标题】：How to highlight a single button in react native?如何在本机反应中突出显示单个按钮？
【发布时间】：2020-12-09 06:46:44
【问题描述】：

如何突出显示被多个按钮包围的单个按钮？

这是我呈现按钮的组件。另外，我导入了一个我不久前创建的自定义按钮。

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

到目前为止，这是我的按钮

但我想突出显示单个按钮并在单击时更改它的背景颜色。我该怎么做？

【问题讨论】：

标签： javascript reactjs react-native jsx

【解决方案1】：

您可以在子组件中执行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>
    );
};

【讨论】：

【解决方案2】：

为了在buttons数组中持久化selected值，你可以这样做

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

【讨论】：