reactjs - 如何在 office ui 结构中的详细列表行的 onclick 上打开模式？

Question

我有要求在单击详细列表行时打开模式。我们正在使用办公室 ui 面料。

Answer 1

这是详细列表

<DetailsList
              items={todos}
              columns={column}
              className={styles.detailList}
              compact={true}
              />

使用 state 添加列并打开对话框 onRender

const [column, setColumn] = useState<IColumn[]>([
    { key: 'column1', name: 'Title', fieldName: 'Title', minWidth: 100, maxWidth: 200, isResizable: false },
    { key: 'column2', name: 'Description', fieldName: 'description', minWidth: 100, maxWidth: 200, isResizable: false },
    { key: 'column4', name: 'Edit', fieldName: 'edit', minWidth: 100, maxWidth: 100, isResizable: false,
        onRender: (item) => (
           <Link onClick={() => toggleHideDialog()}>Edit</Link>
        ),
      },
    { key: 'column5', name: 'Delete', fieldName: 'delete', minWidth: 100, maxWidth: 100, isResizable: false,
        onRender: (item) => (
           <Link onClick={() => { console.log('clicked', item); }}>Delete</Link>
        ),
      },
  ])