Javascript 使用材质ui切换按钮在Reactjs中动态创建和处理多个切换按钮

我试图创建一个边栏，其中包含从对象（键、值）创建的动态切换按钮数量。在我的状态中，我似乎无法获取“key”值来更改相应的“value”。我使用作为按钮组件，可以检索所选的值，但找不到正在更改的索引或值。我创建了一个网站，让人们看到我正在处理的确切问题。我已经尝试查看html属性（并创建自己的属性），但仍然无法获得它。即使是一个尝试其他方法的建议也会很感激，尽管我希望看到我能够用我已经拥有的来完成它。谢谢。

您可以在onClick处理程序中使用带有键参数的内联函数：

import React, { useState } from "react";

import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ToggleButton from "@material-ui/lab/ToggleButton";
import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";

export default function MultipleToggleSelection() {
  const mylist = {
    a: "1",
    b: "1",
    c: "1",
    d: "1"
  };

  const [oneTwoThree, setOneTwoThree] = useState(mylist);

  const handleToggle = (key, value) => {
    oneTwoThree[key] = value;
    setOneTwoThree({...oneTwoThree});
  };

  return (
    <div>
      <div>{JSON.stringify(oneTwoThree, null, ' ')}</div>

      <List>
        {Object.keys(oneTwoThree).map((key, index) => (
          <ListItem key={key}>
            <ToggleButtonGroup
              value={oneTwoThree[index]}
              exclusive
              onChange={(event, value) => handleToggle(key, value)}
            >
              <ToggleButton value="1">1</ToggleButton>
              <ToggleButton value="2">2</ToggleButton>
              <ToggleButton value="3">3</ToggleButton>
            </ToggleButtonGroup>
            {key}
          </ListItem>
        ))}
      </List>
    </div>
  );
}

import React，{useState}来自“React”；
从“@material ui/core/List”导入列表；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/lab/ToggleButton”导入ToggleButton”；
从“@material ui/lab/ToggleButtongGroup”导入ToggleButtongGroup；
导出默认函数MultipleToggleSelection（）{
常数mylist={
a:“1”，
b:“1”，
c:“1”，
d:“1”
};
const[onetwotree，setonetwotree]=useState（mylist）；
常量handleToggle=（键，值）=>{
一对三[键]=值；
setonetwother（{…onetwother}）；
};
返回(
{JSON.stringify（onetwother，null'，）}
{Object.keys（onetwother）.map（（key，index）=>(
handleToggle（键、值）}
>
1.
2.
3.
{key}
))}
);
}