0

我需要从服务器获取数据，然后我在表格中显示这些数据（反应 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>)}

但我得到错误文件未定义；

4

1 回答 1

0

您唯一缺少的是访问您正在定义的自定义操作中每一行的数据。考虑这个示例，其中操作被定义为一个函数，其中rowData一个参数包含单击行的每个字段：

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

example_from_sandbox

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

于 2021-09-02T22:09:55.417 回答