javascript - 将按钮作为 Material-ui 表中的 TableRowColumn

Question

需要帮助将按钮作为 Material-ui 表中的 TableRowColumn !!我需要建立一个批准系统来批准或拒绝用户的请求。我尝试以表格形式这样做。我想在 TableRowColumn 中添加两个按钮“Approved”和“Rejected”，如 Material 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>

我在此处添加的按钮无法按预期运行!!!!!

Answer 1

您没有正确绑定(bind)事件处理程序:试试这个:

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