如何更改材料UI按钮的道具(变体?)>

问题描述 投票:0回答:1

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

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

我有一排按钮,并且想要将Button组件更改为在单击时为'contain',否则为'text'。同样,当单击一个按钮时,其他按钮应恢复正常。我尝试添加...

reactjs button material
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.