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

Question

Need help with putting button as TableRowColumn in material-ui Table.. I need to make an approval system to either approve or reject a user's request. I tried doing so in a tabular form. I wanted to add two buttons "Approved" and "Rejected" in a TableRowColumn as given by material UI !!

THe code here is:

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>

THe buttons I added here are not functioning as desired !!!!

Answer 1

You're not binding event handlers properly: Try this:

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

Answer 2

RaisedButton is a custom component and you are passing"onClick" as a prop to it. Then you have to accept the prop in the child component and define the click function in the parent. Something like in this codesanbdbox - https://codesandbox.io/s/6lp8vkyrnz

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

  <TableCell>
       <RaisedButton click={() => handleClick(row.name)} />
 </TableCell>

Raisedbutton

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

Answer 3

This is a working code with mui(material-ui new version)

 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;

and the Raised Button must be defined as follows:

 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;

And I have put that raised button in a different file in the path of./DemoChild