如何在动态数据上默认 select mui togglebutton

Question

我想select默认第一个切换按钮

import * as React from "react";
import { Typography, ToggleButton, ToggleButtonGroup } from "@mui/material";

export default function ToggleButtons() {

const data = [
{ name: "a", title: "hello1" },
{ name: "b", title: "hello2" },
{ name: "c", title: "hello3" }
  ];

 const [select, setSelected] = React.useState<string | null>("");

  const handleToggle = (
  event: React.MouseEvent<HTMLElement>,
  newSelect: string | null
  ) => {
  if (newSelect !== null) {
  setSelected(newSelect);
  }
  };

  return (
  <ToggleButtonGroup
  value={select}
  exclusive
  onChange={handleToggle}
  aria-label="text alignment"
   >
  {data.map((d, i) => (
    <ToggleButton key={i} value={d.title} aria-label="left aligned">
      <Typography>{d.name}</Typography>
    </ToggleButton>
  ))}
 </ToggleButtonGroup>
 );
 }

处理带有动态数据的 mui 切换按钮上的默认 selection

沙盒代码在这里：https://codesandbox.io/s/gallant-brattain-o0drw7?file=/src/App.tsx

Answer 1

您需要在 ToggleButton 中有一个 active 道具。并且还需要在数据对象中添加选中按钮的值。


import * as React from "react";
import { Typography, ToggleButton, ToggleButtonGroup } from "@mui/material";

export default function ToggleButtons() {
  const data = [
    { name: "a", title: "hello1", active:true},
    { name: "b", title: "hello2" , active:false},
    { name: "c", title: "hello3", active:false }
  ];
  const [select, setSelected] = React.useState<string | null>("");

  const handleToggle = (
    event: React.MouseEvent<HTMLElement>,
    newSelect: string | null
  ) => {
    if (newSelect !== null) {
      setSelected(newSelect);
    }
  };

  return (
    <ToggleButtonGroup
      value={select}
      exclusive
      onChange={handleToggle}
      aria-label="text alignment"
    >
      {data.map((d, i) => (
        <ToggleButton key={i} value={d.title} aria-label="left aligned" selected={d.active}>
          <Typography>{d.name}</Typography>
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  );
}

Answer 2

试试 defaultValue 属性，或者用 OR 运算符定义

import * as React from "react";
import { Typography, ToggleButton, ToggleButtonGroup } from "@mui/material";

export default function ToggleButtons() {
  const data = [
    { name: "a", title: "hello1" },
    { name: "b", title: "hello2" },
    { name: "c", title: "hello3" }
  ];
  const [select, setSelected] = React.useState<string | null>("");

  const handleToggle = (
    event: React.MouseEvent<HTMLElement>,
    newSelect: string | null
  ) => {
    if (newSelect !== null) {
      alert(newSelect);
      setSelected(newSelect);
    }
  };

  return (
    <ToggleButtonGroup
      value={select || "hello1"}
      exclusive
      onChange={handleToggle}
      defaultValue={"hello1"}
      aria-label="text alignment"
    >
      {data.map((d, i) => (
        <ToggleButton key={i} value={d.title} aria-label="left aligned">
          <Typography>{d.name}</Typography>
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  );
}

如何在动态数据上默认 select mui togglebutton

How to default select mui togglebutton on dynamic data

togglebutton

typescript

reactjs

material-ui