打开行选择对话框 [材料表]答案

【问题标题】：Open a dialog on row selection [material-table]打开行选择对话框 [材料表]
【发布时间】：2020-01-28 14:40:12
【问题描述】：

有没有办法在单击表格的特定行时打开详细信息对话框。问题与材料表有关 (https://material-table.com/)。提前致谢！ :)

【问题讨论】：

显示你的代码，到目前为止你做了什么

标签： javascript reactjs dialog styles material-table

【解决方案1】：

没有像您想要的材料表那样显示弹出窗口的本机解决方案。但是你可以做到这一点。

您在 MaterialTable 中有一个名为 onRowClick 的道具。

<MaterialTable onRowClick={(evt, selectedRow) => yourFunction(selectedRow)} />

使用这个道具你可以定义你自己的函数来打开一个popper（https://material-ui.com/components/popper/）或者你想要的任何弹出类型的组件，点击行并在其中显示所选表格行的信息。

这样，您甚至可以请求获取更多详细信息，并使用您获得的 id 显示更多详细信息！

示例：

  const alertMyRow = (selectedRow) => (
      // here i can request something on my api with selectedRow.id to get additional
      // datas which weren't displayed in the table
      alert(`name: ${selectedRow.name}, surname: ${selectedRow.surname}`);
    );

return(){
  render(
    <MaterialTable
       columns={[
          { title: 'ID', field:'id' },
          { title: 'Name', field: 'name' },
          { title: 'Surname', field: 'surname' },
          { title: 'Phone Number', field: 'phone' },
       ]}
       datas={[...]}
       onRowClick={(evt, selectedRow) => alertMyRow(selectedRow)}
     />
   )
 );

如果我不够清楚，请不要犹豫；）

【讨论】：