Как сделать всю строку кликабельной в компоненте DetailsList?(Офис-щ-ткань)

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')
);