Question

我有一排按钮，并且想要将Button组件更改为在单击时为“包含”，否则为“文本”。同样，当单击一个按钮时，其他按钮应恢复正常。我尝试将onClick处理程序添加到按钮组件并获得状态更改，但这非常令人困惑。由于我是React的新手，因此非常感谢您提供帮助的代码段。以下是我尝试但出现错误“ TypeError：无法获取未定义或空引用的属性'red'”的代码：

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

更新的带有评论的沙箱

而且您也从未将initialState加载到钩子useState(initialState )中，这就是为什么会出现该错误。

请务必在https://reactjs.org/docs/hooks-reference.html#functional-updates的useState文档中阅读以下说明，以确保您的更新有效onClick。甚至可以为此使用useReducer钩子。

如何更改材质UI按钮的道具（变体）？

1 个答案: