如何更改material-ui Button的道具（变体）？

Question

我有一排按钮，希望在单击时将 Button 组件更改为“包含”，否则更改为“文本”。此外，当单击一个按钮时，其他按钮应恢复正常。我尝试将 onClick 处理程序添加到按钮组件并获取状态更改，但这非常令人困惑。由于我是 React 的新手，因此希望有代码 sn-p 来提供帮助。 下面是我尝试过的代码，但出现错误“TypeError: Unable to get property 'red' of undefined or null reference”：

import React, { useState } from "react";
import Button from "@material-ui/core/Button";

let initialState = {
    red: false,
    blue: false,
    green: false
};

export default function Home() {

   const [initialState, setState] = useState();

   const handleClick = (name) => event => {
   switch(name){
      case 'Red': initialState.red = true; break;
      case 'Blue': initialState.blue = true; break;
      case 'Green': initialState.green = true; break;
      default: break;
   }
   setState(initialState);
 }

 return (
    <div className="Home">
      <Button onClick={handleClick("Red")} variant={initialState.red ? "contained" : "text"}> Red </Button>
      <Button onClick={handleClick("Blue")} variant={initialState.blue ? "contained" : "text"} > blue </Button>
      <Button onClick={handleClick("Green")} variant={initialState.green ? "contained" : "text"} > green </Button>
  </div>
);
}

Answer 1

这是一个使用带有 react https://codesandbox.io/s/gracious-frog-du5s1 的钩子的示例。

虽然听起来你想要切换按钮。如果您使用的是最新的 material-ui，这是他们已经构建的组件https://material-ui.com/components/toggle-button/。如果您希望更改外观，您可以查看所涉及的各个组件的 CSS API。

编辑：这是根据您提供的信息https://codesandbox.io/s/wonderful-dhawan-ysjgk

更新的带有 cmets 的沙箱

此外，您从未将您的 initialState 加载到钩子 useState(initialState ) 中，这就是您收到该错误的原因。

请务必在此处https://reactjs.org/docs/hooks-reference.html#functional-updates 阅读有关 useState 的文档中的以下注释，以确保您的更新正常工作onClick。甚至可能为此使用useReducer 钩子。