是否可以在 mui 表中创建不同的操作按钮？

Question

我正在创建一个 table，其中将从 api 获取数据并显示在 mui table 或 material table 中。我想向不同的行显示不同的操作按钮，例如在第一行中，当我单击该连接时，该按钮应显示“连接”，它应该更改为“断开连接”，这里的问题是它将所有现有的“连接”按钮更改为断开连接再次单击断开连接时，按钮应变为连接。我希望此行为仅适用于该特定行，而不适用于整个 table。我怎样才能做到这一点？

Answer 1

您需要使用关联数组来确定该示例，而不是使用 var 来确定它是连接还是断开连接

    if(check[index]==true){
<button onClick={handlechange}>Disconnect </button>
} 
else {
<button onClick={handlechange}>connect </button>}

Answer 2

您应该通过为每一行添加一个额外的字段来扩展您在 Mui table 上使用的数据数组。一个用于保存状态（“连接”或“断开连接”），另一个用于识别必须更改的行。之后，您将能够调用 Button 组件的 onClick 事件，并且只会影响目标行。以 codesandbox, I added the "id" and "isConnected" prop to the data array. You can see the modified version in this link 上的 Mui 页面为例，还有以下内容：

function createData(id, name, calories, fat, carbs, protein, isConnected) {
  return { id, name, calories, fat, carbs, protein, isConnected };
}

const data = [
  createData(1, "Frozen yoghurt", 159, 6.0, 24, 4.0, true),
  createData(2, "Ice cream sandwich", 237, 9.0, 37, 4.3, false),
  createData(3, "Eclair", 262, 16.0, 24, 6.0, false),
  createData(4, "Cupcake", 305, 3.7, 67, 4.3, false),
  createData(5, "Gingerbread", 356, 16.0, 49, 3.9, false)
];

export default function BasicTable() {
  const [rows, setRows] = React.useState(data);
  const handleChangeConnect = (id) => {
    console.log("The id is ", id);
    setRows(
      rows.map((row) => {
        if (row.id == id) {
          return { ...row, isConnected: !row.isConnected };
        } else return { ...row };
      })
    );
  };
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
            <TableCell align="right">Is connected</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
              <TableCell align="right">
                <Button
                  variant="contained"
                  color={row.isConnected ? "primary" : "secondary"}
                  onClick={() => {
                    handleChangeConnect(row.id);
                  }}
                >
                  {row.isConnected ? "disconnect" : "connect"}
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

```l

是否可以在 mui 表中创建不同的操作按钮？

Is it possible to create different action button in mui tables?

reactjs

material-ui

react-table

mui-datatable

material-table