根据另一个组件更改组件道具

Question

问题： 我需要根据 onclick 事件更改两个组件。 onclick 事件 handleChange 上显示的函数有一个 prop 'text' 。每当我运行 onclick 事件时，我都需要将 prop 的值更改 3 次。

1.
我有一个芯片组件（第一个组件），我想在单击按钮（第二个组件）时更改其文本和颜色；该按钮也将更改其文本。所以我在按钮中使用了条件渲染和 onclick 事件。

这里的事情是我有 3 个状态我想改变我的芯片和按钮，但只能用两个来实现：

-我在使用 useState 创建状态常量时应用的默认值：

const [change, setChange] = useState("Pending");

-我在按钮中传递给事件的值：

<Button variant="contained" onClick={() => handleChange("hello")}>

2.

除了第一个按钮之外，我还有另一个按钮，每当我的第三个芯片状态发生变化时，我想隐藏它。

我有 3 个状态：你好、待定、取消。

当第一个按钮和芯片更改为取消我想隐藏我的第三个按钮。

我试着做一个switch语句来解决3个状态的问题，但是我不知道怎么用。我不知道如何在按钮内传递 3 个值（hello、pending、cancel。）。

Here is my code example

注意：我是代码沙箱的新手，所以请告诉我你是否看到了变化，因为我对平台的管理不够好

Answer 1

假设你的三个状态是有序的

const state = ["pending", "hello", "cancel"];
const [change, setChange] = useState(0);

function handleChange() {
  setChange(prevState => prevState === 2 ? 0 : prevState + 1);
}
  
const style = [
  {color: 'secondary'},
  {color: 'primary'},
  {style: {backgroundColor:"#7ed6df"}}
];

return (
  <>
    <Chip label={state[change]} {...style[change]} />
    <Button variant="contained" onClick={handleChange}>
      {state[change]}
    </Button>
    {change !== 2 && <Button variant="contained">Disappear</Button>}
  </>
);