поместив Button как TableRowColumn в таблицу Material-UI

Question

Нужна помощь в размещении кнопки TableRowColumn в Material-UI Table !! Мне нужно создать систему одобрения, чтобы одобрить или отклонить запрос пользователя. Я попытался сделать это в табличной форме. Я хотел добавить две кнопки «Одобрено» и «Отклонено» в 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>

Добавленные мной кнопки не работают должным образом !!!!

Answer 1

RaisedButton - это пользовательский компонент, и вы передаете «onClick» в качестве поддержки. Затем вы должны принять опору в дочернем компоненте и определить функцию щелчка в родительском компоненте. Нечто подобное в этом кодеanbdbox - 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 2

Вы не связываете обработчики событий должным образом: Попробуйте это:

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