Javascript 将类切换到.map（）函数中的特定项

我正在使用React Native，我设置了一个按钮，您可以在其中切换单击，它将向其中添加类。但是，如果我有一个项目数组，它会将类添加到所有项目中。我只想将该类添加到单击的按钮

const Tags = props => {
  const [selectTag, setSelectTag] = useState(false);

  const tags = ['apples', 'oranges', 'lemon', 'watermelon', 'green peas', 'grapes'];

  // toggles the click
  const handleSelectTags = clicked => {
    setSelectTag(clicked);
  };

  return (
    <>
      <View>
        {tags.map((item, index) => (
          <TouchableOpacity
            onPress={() => handleSelectTags(!selectTag)}
            key={index}
            style={
              // when selectTag is true, adds styles.selected
              selectTag 
                ? [styles.tags, styles.selected]
                : [styles.tags, styles.notSelected]
            }>
            <Text>{item}</Text>
          </TouchableOpacity>
        ))}
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  tags: {
    paddingVertical: 3,
    paddingHorizontal: 9,
    borderWidth: 1,
    marginRight: 8,
    marginBottom: 8,
    borderRadius: 8,
  },
  selected: {
    borderColor: 'green',
  },
  notSelected: {
    borderColor: '#ccc',
  },
});

export default Tags;

不确定我所拥有的是否是最好的方法，想知道是否有更优雅的方法？

让每个TouchableOpacity通过将其制作成一个组件来管理自己的状态。这样，每次你点击一个项目时，它只是在更新自己：这将允许你同时点击多个项目

const CustomComponent = props => {
  let [selected, setSelected] = useState(false)

  return (
    <TouchableOpacity
      onPress={() => setSelected(!selected)}
      style={
        selected 
        ? [styles.tags, styles.selected]
        : [styles.tags, styles.notSelected]
      }>
     <Text>{props.item}</Text>
    </TouchableOpacity>
  )
}

然后在地图中渲染此组件

{
  tags.map((item, index) => (
     <CustomComponent
       key={index}
       item={item}
     />
   ))
 }

如果正确的话，试试这个

const [selectTag, setSelectTag] = useState('');

const tags = ['apples', 'oranges', 'lemon', 'watermelon', 'green peas', 'grapes'];

// toggles the click
const handleSelectTags = tag => {
  setSelectTag(tag);
};

return (
  <>
    <View>
      {tags.map((item, index) => (
        <TouchableOpacity
          onPress={() => handleSelectTags(item)}
          key={index}
          style={
            // when selectTag is true, adds styles.selected
            selectTag == item
              ? [styles.tags, styles.selected]
              : [styles.tags, styles.notSelected]
          }>
          <Text>{item}</Text>
        </TouchableOpacity>
      ))}
    </View>
  </>
);

---

我建议给每个按钮一个自己的状态

代码：

返回

输出

演示：

---

您是否希望一次只选择一个项目？@Galupuf否，我希望一次选择多个项目。谢谢！这就是我采用的解决方案。也为我提供了破解密码的方法。

 // each button has his own entry
  const [selectTag, setSelectTag] = useState([false, false, false, false, false, false]);
  const tags = ['apples', 'oranges', 'lemon', 'watermelon', 'green peas', 'grapes'];

  // toggles the click
  const handleSelectTags = (index) => {
    var tmp = [ ...selectTag ]
    tmp[index] = !selectTag[index]; // update
    setSelectTag(tmp);
  }

    <>
      <View>
        {tags.map((item, index) => (
          <TouchableOpacity
            onPress={() => handleSelectTags(index)}
            key={index}
            style={
              // update here to index of selectTag
              selectTag[index] 
                ? [styles.tags, styles.selected]
                : [styles.tags, styles.notSelected]
            }>
            <Text>{item}</Text>
          </TouchableOpacity>
        ))}
      </View>
    </>