如何在動態數據上默認選擇 mui 切換按鈕

Question

我想默認選擇第一個切換按鈕

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 切換按鈕上的默認選擇

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

Answer 1

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

Answer 2

您需要在 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>
  );
}