javascript - 将类切换到 .map() 函数中的特定项目

Question

我正在使用 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;

不确定我所拥有的是否是执行此操作的最佳方法，想知道是否有更优雅的方法？

Answer 1

让每个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>
  )
}

然后在 map 中渲染该组件

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