基于另一个组件来修改一个组件的道具

Question

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

1。
我有一个芯片组件(第一个组件)，我想改变它的文本和颜色每当我的按钮(第二个组件)，它被点击;按钮也会改变它的文本。所以我使用了条件渲染和按钮中的onclick事件。

这里的事情是，我有3个状态，我想改变我的芯片和按钮，但只能使它与两个:

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

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

-我传递给按钮事件的值:

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

2。

除了第一个按钮，我还有另一个按钮，当我的芯片的第三个状态改变时，我想隐藏它。

我有三个状态:你好，待定，取消。

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

我试图做一个switch语句来解决3个状态的问题，但是我不知道如何使用它。我不知道如何传递这三个值(hello,pending,cancel.)在按钮内。

下面是我的代码示例

注意:我是代码沙箱的新手，所以请告诉我你是否看到了变化，因为我没有很好地管理平台

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>}
</>
);