在DetailsList组件中使整行可单击,可以通过设置onItemInvoked属性来实现。onItemInvoked属性是一个函数,当用户单击列表中的某一行时,会触发该函数。
具体实现步骤如下:
npm install office-ui-fabric-react
import { DetailsList } from 'office-ui-fabric-react/lib/DetailsList';
import 'office-ui-fabric-react/lib/components/DetailsList/DetailsList.scss';
const items = [
{ key: '1', name: 'Item 1', value: 'Value 1' },
{ key: '2', name: 'Item 2', value: 'Value 2' },
{ key: '3', name: 'Item 3', value: 'Value 3' },
];
<DetailsList
items={items}
columns={[
{ key: 'column1', name: 'Name', fieldName: 'name', minWidth: 100 },
{ key: 'column2', name: 'Value', fieldName: 'value', minWidth: 100 },
]}
onItemInvoked={this.onItemClicked}
/>
onItemClicked = (item) => {
// 处理行点击事件
console.log('Clicked item:', item);
}
通过以上步骤,就可以在DetailsList组件中实现整行可单击的效果。当用户单击某一行时,会触发onItemClicked函数,并将被点击的行的数据作为参数传递给该函数。你可以在该函数中处理行点击事件,例如打开一个模态框显示更多信息。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和决策。
领取专属 10元无门槛券
手把手带您无忧上云