添加对象数组的链接

Question

我需要从服务器获取数据，然后在表中显示这些数据（react js），如果用户单击表中的按钮，他可以下载文件

<Table>
    <thead>
        <tr>
          <th>File Name</th>
          <th>Date</th>
          <th>Download file</th>

        </tr>
    </thead>
      {files &&  (
      <tbody className="text-content-dark">
      {files.map(file => (
        <tr>
        <td>{file.name}</td>
        <td>{file.date}</td>

        <td>
        <Button
            className="btn-large btn-primary fit-content"
            icon="arrowRight"
            iconPosition="right"
            onClick={() => window.open('http://localhost:5000/files/' + file.name, '_blank').focus()}>
            Download
          </Button>
         </td>
      </tr>
    ))}
      </tbody>
       )}
    </Table> 

我想使用材质表，但我没有找到将链接添加到每个对象的方法

数据示例：

files = [ {name : "file1", created_at: "29/01/2021", link : "localhost:5000/files" + "file1"},
          {name : "file2", created_at: "20/03/2021",link : "localhost:5000/files" + "file2"}]

材料表：

{files && (
<Fragment>
<MaterialTable
columns={tableColumns}
data={files}
title="Material Table - Custom Filter Component"
options={{ search: false, filtering: true }}

actions={[
  {
    icon: 'save',
    tooltip: 'Save User',
    onClick: () => window.open('http://localhost:5000/files/' + files.name, '_blank').focus()
  }
]}

/>

</Fragment>)}

但我收到错误“未定义”。

Answer 1

您唯一缺少的是对您定义的自定义操作中每一行的数据的访问。 考虑这个示例，其中操作被定义为函数，其中

rowData

是包含单击行的每个字段的参数：

 actions={[
          (rowData) => {
            return {
              icon: "save",
              tooltip: "Get file!",
              onClick: (event, rowData) => {
                alert("Save file of " + rowData.name);
              }              
            };
          }
        ]}

这里是工作沙箱的链接。让我知道这是否对你有用！