根据另一个更改组件道具

Question

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

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

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

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

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

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

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

2.

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

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

当第一个按钮和筹码变为取消时我想隐藏我的第三个按钮。

我试图做一个switch语句来解决3个状态的问题，但是我不知道如何使用它。我也不知道如何在按钮内传递 3 个值(你好，待定，取消。)。

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

根据另一个更改组件道具

Change a component props based on another

javascript

reactjs

material-ui

render

conditional-operator