激活或不激活文本组件答案

【问题标题】：Make active or not active Text components激活或不激活文本组件
【发布时间】：2022-02-04 04:03:52
【问题描述】：

您好，我在 React Native 中制作了一个应用程序！

我尝试让三个激活或非激活按钮。所以我用

定义了一个状态

const [activeLabel, setActiveLabel] = useState(0);

在我的文本组件上我有

activeLabel === 1 ? styles.selectedLabel : styles.notSelectedLabel
onPress={() => setActiveLabel(1)}

当我初始化时，我将 activeLabel 设置为 0，当我单击时，带有 console.log activeLabel 的其他组件保持在 0。

我做错了什么？

谢谢！

这是我的组件标签

function Labels({
  setDataNumber,
  title,
  color,
  firstLabel,
  secondLabel,
  thirdLabel,
}) {
  const [activeLabel, setActiveLabel] = useState(0);

  return (
    <View style={{ flexDirection: "row" }}>
      <Text style={{ color: color, fontSize: 20, margin: 10 }}>{title}</Text>
      <View
        style={{ flexDirection: "row", justifyContent: "flex-end", flex: 1 }}
      >
        <Text
          style={{
            color: color,
            borderColor: color,
            ...(activeLabel === 0
              ? styles.selectedLabel
              : styles.notSelectedLabel),
          }}
          onPress={() => setActiveLabel(0), () => setDataNumber(0)}
        >
          {firstLabel}
        </Text>
        <Text
          style={{
            color: color,
            borderColor: color,
            ...(activeLabel === 1
              ? styles.selectedLabel
              : styles.notSelectedLabel),
          }}
          onPress={() => setActiveLabel(1), () => setDataNumber(1)}
        >
          {secondLabel}
        </Text>
        <Text
          style={{
            color: color,
            borderColor: color,
            ...(activeLabel === 2
              ? styles.selectedLabel
              : styles.notSelectedLabel),
          }}
          onPress={() => setActiveLabel(2), () => setDataNumber(2)}
        >
          {thirdLabel}
        </Text>
      </View>
    </View>
  );
}

【问题讨论】：

标签： javascript ios node.js reactjs react-native

【解决方案1】：

@sidharth-rathi 为我提供了解决方案！

function Labels({ setActiveLabel, title, color, activeIndex, labels = [] }) {
  return (
    <View style={{ flexDirection: "row" }}>
      <Text style={{ color: color, fontSize: 20, margin: 10 }}>{title}</Text>
      <View
        style={{ flexDirection: "row", justifyContent: "flex-end", flex: 1 }}
      >
        {labels.map((el, index) => (
          <Text
            style={{
              color: color,
              borderColor: color,
              ...(activeIndex === index
                ? styles.selectedLabel
                : styles.notSelectedLabel),
            }}
            onPress={() => setActiveLabel(index)}
          >
            {el}
          </Text> 
        ))}
      </View>
    </View>
  );
}

【讨论】：