将 Button 作为 TableRowColumn 放在 material-ui 表中答案

【问题标题】：putting Button as TableRowColumn in material-ui Table将 Button 作为 TableRowColumn 放在 material-ui 表中
【发布时间】：2018-08-27 18:43:18
【问题描述】：

需要帮助将按钮作为 TableRowColumn 放入 material-ui 表中！我需要建立一个批准系统来批准或拒绝用户的请求。我尝试以表格形式这样做。我想在 Material UI 给出的 TableRowColumn 中添加两个按钮“已批准”和“拒绝”！

这里的代码是：

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>

我在此处添加的按钮无法正常工作！！！！

【问题讨论】：

当您说无法正常工作时，请告诉我们您看到了什么错误？另外，您是否需要将括在花括号中？它们只是自定义组件吧？
Shrawan，请让我知道以下解决方案是否对您有用，如果是，请感谢您是否可以投票并标记为已接受。

标签： javascript reactjs material-ui

【解决方案1】：

您没有正确绑定事件处理程序：试试这个：

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

【讨论】：

【解决方案2】：

RaisedButton 是一个自定义组件，您将“onClick”作为道具传递给它。然后你必须接受子组件中的道具并在父组件中定义点击功能。这个codesanbdbox中的东西 - https://codesandbox.io/s/6lp8vkyrnz

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

【讨论】：