如何通过点击事件切换3种状态修改多个React组件props与显隐

实现方案 #

你要的3种状态循环切换不需要在触发点击事件时传入固定值，直接在状态切换逻辑里按当前状态匹配下一个状态即可，完整实现步骤如下： #

1. 状态循环逻辑实现

首先修改handleChange函数，用switch匹配当前状态返回下一个状态，不需要接收传参：

// 原有状态声明不变
const [change, setChange] = useState("Pending");

const handleChange = () => {
  switch(change) {
    case "Pending":
      setChange("hello");
      break;
    case "hello":
      setChange("cancel");
      break;
    case "cancel":
      // 可根据需求调整，这里设置为循环切回初始状态，也可以停在cancel状态
      setChange("Pending");
      break;
    default:
      setChange("Pending");
  }
}

对应修改按钮的点击事件绑定，不需要传入固定值，同步实现按钮文本动态切换：

<Button variant="contained" onClick={handleChange}>
  {change === "Pending" ? "切换到hello" : change === "hello" ? "切换到cancel" : "切换到Pending"}
</Button>

2. Chip组件属性动态绑定

直接根据当前状态匹配Chip的文本和颜色即可：

<Chip
  label={change}
  // 颜色可根据实际需求自定义调整
  color={change === "Pending" ? "default" : change === "hello" ? "primary" : "error"}
/>

3. 第三个按钮隐藏逻辑

用条件渲染实现，状态为cancel时不渲染按钮：

{/* 只有状态不是cancel时才显示第三个按钮 */}
{change !== "cancel" && <Button>第三个按钮</Button>}

内容的提问来源于stack exchange，提问作者Karol