reactjs 将按钮作为TableRowColumn放入material-ui表中

7lrncoxx  于 2023-01-08  发布在  React
关注(0)|答案(3)|浏览(201)

需要帮助把按钮作为TableRowColumn在材料UI表!!我需要一个审批系统,以批准或拒绝用户的请求。我尝试这样做的表格形式。我想添加两个按钮“批准”和“拒绝”在TableRowColumn中由材料UI!!
这里的代码是:

const usersToRequest = [
{ name: 'Rahul', phone: '1234567890', from: 'sunday', to: 'saturday', roomType: 'Single Room' },
{ name: 'Hari', phone: '9876554423', from: 'monday', to: 'sunday', roomType: 'Double Room' },
{ name: 'Rohit', phone: '0909090987', from: 'tuesday', to: 'monday', roomType: 'Twin Room' },
{ name: 'Rohit', phone: '0909090987', from: 'tuesday', to: 'monday', roomType: 'Twin Room' },
{ name: 'Rohit', phone: '0909090987', from: 'tuesday', to: 'monday', roomType: 'Twin Room' },
{ name: 'Rohit', phone: '0909090987', from: 'tuesday', to: 'monday', roomType: 'Twin Room' },
{ name: 'Rohit', phone: '0909090987', from: 'tuesday', to: 'monday', roomType: 'Twin Room' },
{ name: 'Rohit', phone: '0909090987', from: 'tuesday', to: 'monday', roomType: 'Twin Room' },
];



<TableBody displayRowCheckbox={false} stripedRows>
{
usersToRequest.map((utr, i) => (
i < 4 ? <TableRow key={i}>
<TableRowColumn>{i + 1}</TableRowColumn>
<TableRowColumn>{utr.name}</TableRowColumn>
<TableRowColumn>{utr.phone}</TableRowColumn>
<TableRowColumn>{utr.roomType}</TableRowColumn>
<TableRowColumn>{utr.from}</TableRowColumn>
<TableRowColumn>{utr.to}</TableRowColumn>
<TableRowColumn>
{
<RaisedButton label="Approved" primary={true} onClick={console.log("!23")}/>
<RaisedButton label="Rejected" secondary={true} onClick={console.log("!23")}/>
}
</TableRowColumn>
</TableRow> : ''
))
}
</TableBody>

我在这里添加的按钮无法正常工作!!!

wvyml7n5

wvyml7n51#

未正确绑定事件处理程序:试试这个:

<RaisedButton label="Approved" primary={true} onClick={()=>{console.log("!23")}}/>
<RaisedButton label="Rejected" secondary={true} onClick={()=>{console.log("!23")}}/>
7hiiyaii

7hiiyaii2#

RaisedButton是一个自定义组件,您将“onClick”作为prop传递给它,然后您必须在子组件中接受prop并在父组件中定义click函数。

const handleClick = name => {
    console.log(name);
  };

  <TableCell>
       <RaisedButton click={() => handleClick(row.name)} />
 </TableCell>
  • 抬起按钮 *
function RaisedButton(props) {
  const { classes } = props;
  return (
    <Button variant="contained" onClick={props.click}>
      Default
    </Button>
  );
}
ttp71kqs

ttp71kqs3#

这是一个使用mui的工作代码(material-ui新版本)

import React from "react";
import PropTypes from "prop-types";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import RaisedButton from "./DemoChild.js";


let id = 0;
function createData(name, calories, fat, carbs, protein) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}

const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9),
];

function SimpleTable(props) {
  const { classes } = props;

  const handleClick = (name) => {
    console.log(name);
  };
  return (
    <Paper>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell numeric>Calories</TableCell>
            <TableCell numeric>Fat (g)</TableCell>
            <TableCell numeric>Carbs (g)</TableCell>
            <TableCell numeric>Protein (g)</TableCell>
            <TableCell>Action</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => {
            return (
              <TableRow key={row.id}>
                <TableCell component="th" scope="row">
                  {row.name}
                </TableCell>
                <TableCell numeric>{row.calories}</TableCell>
                <TableCell numeric>{row.fat}</TableCell>
                <TableCell numeric>{row.carbs}</TableCell>
                <TableCell numeric>{row.protein}</TableCell>
                <TableCell>
                  <RaisedButton click={() => handleClick(row.name)} />
                </TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </Paper>
  );
}

SimpleTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default SimpleTable;

和凸起按钮必须定义如下:

import React from "react";
import Button from "@mui/material/Button";

function ContainedButtons(props) {
//   const { classes } = props;
  return (
    <Button variant="contained" onClick={props.click}>
      Default
    </Button>
  );
}

export default ContainedButtons;

我已经把那个凸起的按钮放在./DemoChild路径下的另一个文件中

相关问题