在 React Native 中单击时如何使每个按钮更改颜色？答案

【问题标题】：How to make each button chnage color when clicked in React Native?在 React Native 中单击时如何使每个按钮更改颜色？
【发布时间】：2021-04-12 07:45:04
【问题描述】：

我在我的应用程序上呈现 5 个具有 5 种不同颜色的按钮，但是当我单击一个按钮时，所有按钮都会变为相同的颜色。我只想更改我单击的按钮的状态，其他按钮保持默认颜色。

非常感谢您的帮助。下面是代码：

const buttonArray = [
        { value: 'red', name: 'tomato' },
        { value: 'green', name: 'apple' },
        { value: 'blue', name: 'berry' },
        { value: 'yellow', name: 'banana' },
        { value: 'orange', name: 'orange' }
    ]

    const [buttonCol, setButtonCol] = useState(null)
    const [isSelected, setIsSelected] = useState(false)

    function selectedBtn(index) {
        buttonArray.map((btn, ind) => {
            if (buttonArray.indexOf(btn) === index) {
                setIsSelected(!isSelected)
                setButtonCol(btn.value)
            }
        })
    }

return(
<View style={styles.button}>
       { buttonArray.map((button, index) => {
           return (
            <TouchableOpacity
              style={[globalStyles.selectButton, isSelected ? { backgroundColor: buttonCol } : { backgroundColor: globalColors.iconGreyColor }]}
               onPress={() =>  selectedBtn(index) }>
                      <Text style={{ color: '#fff' }}>{button.name}</Text>
            </TouchableOpacity>
          )})
   }
</View>
)

【问题讨论】：

标签： javascript arrays react-native use-state

【解决方案1】：

这可能会有所帮助

const buttonArray = [...];

const [buttonCol, setButtonCol] = useState(null);
const [isSelected, setIsSelected] = useState(false);
const [data, setData] = useState(buttonArray); // New Added

function selectedBtn(index) {
  const newData = [...data];
  newData[index].isSelected = newData[index].isSelected ? false : true;
  setData(newData);
}

return (
  <View style={styles.button}>
    {data.map((button, index) => {
      return (
        <TouchableOpacity
          style={[
            globalStyles.selectButton,
            button.isSelected
              ? { backgroundColor: buttonCol }
              : { backgroundColor: globalColors.iconGreyColor },
          ]}
          key={button.value} // add key here
          onPress={() => selectedBtn(index)}
        >
          <Text style={{ color: "#fff" }}>{button.name}</Text>
        </TouchableOpacity>
      );
    })}
  </View>
);

【讨论】：

谢谢@Nooruddin 这种方法是最有希望的，但是当我 console.log (newData) 我得到正确的对象但它没有设置我的状态Array [ Object { "name": "tomato", "value": "red", }, Object { "isSelected": true, "name": "apple", "value": "green", } ]
@jonson.ncube 我已经更新了我的答案，请通过在地图中添加键来检查，例如key={button.value}
成功了！！！！！！！知道如何切换吗？

【解决方案2】：

记录selectedIndex 而不仅仅是selected 标志

  const [selectedIndex, setSelectedIndex] = useState(-1);

  return (
    <View style={styles.button}>
      {buttonArray.map((button, index) => {
        return (
          <TouchableOpacity
            style={[
              globalStyles.selectButton,
              selectedIndex === index
                ? {backgroundColor: buttonArray[index].value}
                : {backgroundColor: globalColors.iconGreyColor},
            ]}
            onPress={() => setSelectedIndex(index)}>
            <Text style={{color: '#fff'}}>{button.name}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );

【讨论】：