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

Jorge Aguirre
2019-04-18  
3485  
    
4  

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

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

office-ui-fabric
stack overflow How can I make an entire row clickable in a DetailsList component? (office-ui-fabric)
原文答案

答案:

作者头像
Jorge Aguirre
2019-04-18    5      原文

覆盖 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')
);
作者头像
Yasir Ali
2022-01-25    2      原文

这是单击解决方案，使用 onActiveItemChanged Prop类似：

const _onActiveItemChanged = (item): void => {
    alert(`Item invoked: ${JSON.stringify(item)}`);
  };

这是 detaillist 

<DetailsList
      items={assessmentList}
      compact={false}
      columns={columns}
      onActiveItemChanged={_onActiveItemChanged } 
/>
作者头像
Danial
2020-01-29    0      原文

请 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>
        );
      }}
    />
作者头像
Snowball
2022-06-03    0      原文

使用 onRenderRow 和 cloneElement 附加 onClick 监听器：

import React, { useCallback, cloneElement } from 'react';
import { DetailsList } from '@fluentui/react';

const Component = () => {

    const onItemInvoked = useCallback( ( item ) => {

        console.log( item );

    }, [] );

    const onRenderRow = useCallback( ( row, defaultRender ) => {

        return cloneElement( defaultRender( row ), { onClick: () => onItemInvoked( row.item ) } )

    }, [ onItemInvoked ] );

    return (
        <DetailsList
            onRenderRow={ onRenderRow }
        />
    );

};

相关问题

标签