如何在DetailsList组件中使整行可单击？(office-ui-fabric)

Question

我一直在使用DetailsList组件，但还没有找到一种方法来使整个行都可以点击--有没有关于如何实现这一点的示例代码片段或指针？

https://developer.microsoft.com/en-us/fabric#/components/detailslist

Answer 1

覆盖onRenderRow对我很有效。

const _columns: IColumn[] = [
  {
    key: 'name',
    name: 'Name',
    fieldName: 'name',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'value',
    name: 'Value',
    fieldName: 'value',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true,
  }
];

const _items = Array.apply(null, Array(10)).map((_: any, num: number) => ({
  key: num.toString(),
  name: `Item ${num.toString()}`,
  value: num.toString()
}));

class Content extends React.Component {
  private _renderRow(props: Fabric.IDetailsRowProps, defaultRender: any): JSX.Element {
     return (
      <Fabric.DetailsRow {...props} onClick={() => alert('click')}/>
     );
   }

  public render() {
    return (
      <Fabric.Fabric>
          <Fabric.DetailsList
            items={ _items } 
            columns={ _columns.concat(..._columns, ..._columns, ..._columns) }
            onRenderRow={this._renderRow}
          />        
      </Fabric.Fabric>
    );
  }
}

ReactDOM.render( 
  <Content />,
  document.getElementById('content')
);

Answer 2

请onItemInvoked属性和方法。但它在双击时起作用。我也在寻找一次点击解决方案

  const onItemInvoked = (item): void => {
    alert(`Item invoked: ${JSON.stringify(item)}`);
  };
    <DetailsList
      items={assessmentList}
      compact={false}
      columns={columns}
      selectionMode={SelectionMode.multiple}
      getKey={_getKey}
      setKey="multiple"
      layoutMode={DetailsListLayoutMode.justified}
      checkboxVisibility={CheckboxVisibility.hidden}
      isHeaderVisible={true}
      selectionPreservedOnEmptyClick={false}
      enterModalSelectionOnTouch={true}
      ariaLabelForSelectionColumn="Toggle selection"
      ariaLabelForSelectAllCheckbox="Toggle selection for all items"
      checkButtonAriaLabel="Select Checkbox"
      onRenderRow={onRenderRow}
      onItemInvoked={onItemInvoked}
      onRenderDetailsHeader={(headerProps, defaultRender) => {
        return (
          <Sticky
            stickyPosition={StickyPositionType.Header}
            isScrollSynced={true}
            stickyBackgroundColor="transparent"
          >
            <div className="text-center">{defaultRender(headerProps)}</div>
          </Sticky>
        );
      }}
    />