sharepoint - 如果 SPFX PNP ListView 被隐藏并在 Modern 页面上再次显示,则无法在页面上加载
问题描述
我有我放置在渲染部分的列表视图,页面加载我通过 div 内的 j 查询隐藏它,当我显示它时没有数据出现在它上面,但是如果我点击开发工具它开始出现或者如果我改变它开始出现的屏幕分辨率。这很奇怪。
<ListView
items={this.state.supplierContractItems.slice(this.state.supplierContractRare, this.state.supplierContractFront + 1)}
showFilter={this.state.showFilters}
viewFields={this.state.supplierContractViewFields}
selectionMode={SelectionMode.multiple}
selection={this.getSupplierContractSelection}
filterPlaceHolder="Search..." />
解决方案
FIRSTLY THANKS A LOT TO INVESTIGATE ON THIS, JUST TRY THE BELOW CODE, THIS WILL FIRST HIDE THE LIST VIEW ON PAGE LOAD AND THEN BUTTON IS CLICKED TO SHOW BACK, IT ONLY SHOWS THE SEARCH BUTTON NOT THE RESULT, BUT JUST IF YOU`enter code here` CHANGE THE RESOLUTION OF THE SCREEN BY PRESSING CTRL + Mouse wheel up/down the result will show automatically.
export default class Reacttest extends React.Component<IReacttestProps, IHelloWorldState, {}> {
constructor(props: IReacttestProps) {
super(props)
this.state = {
items: [],
selecteduser: []
};
sp.setup({
spfxContext: this.props.context
});
this.handle = this.handle.bind(this);
}
public render(): React.ReactElement<IReacttestProps> {
const viewFields: IViewField[] = [{
name: "Title",
displayName: "Title",
isResizable: true,
sorting: true,
minWidth: 0,
maxWidth: 150
},
{
name: "ID",
displayName: "ID",
isResizable: true,
sorting: true,
minWidth: 0,
maxWidth: 200
}];
return (
<div >
<span id="listView_id">
<ListView
items={this.state.items}
viewFields={viewFields}
iconFieldName="ServerRelativeUrl"
compact={true}
selectionMode={SelectionMode.multiple}
selection={this._getSelection}
showFilter={true}
filterPlaceHolder="Search..."
/>
</span>
<span> <input type="button" value="Click To Show" onClick={this.handle} /></span>
</div>
);
}
componentDidMount() {
sp.web.lists.getByTitle("People").items.top(5).get().then(items => {
console.log(items)
this.setState({ items })
});
$("#listView_id").hide();
}
private handle() {
$("#listView_id").show();
}
private _getSelection(items: any[]) {
console.log('Items:', items);
}
}
推荐阅读
- c# - Xamarin-IOS 生成错误 - 无法链接程序集。处理项目引用时出错
- vba - 这个搜索功能似乎在第三次调用它时就中断了,不管我做什么?
- azure - 参考现有资源组,而不是在每个打包程序构建上创建一个新资源组
- sharepoint - Sharepoint 时效专栏
- php - 输入数组验证消息错误 Laravel 5.5
- php - 在 Libxml 中包装标签
- vba - 删除附件时如何过滤掉gif文件?
- database - 如何在我的“A”表中使用“B”表的 id 序列?
- node.js - 无法从正在运行的终端之外杀死 Mongodb 服务器
- javascript - 点击时的javascript可重复功能