如何解决如果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..." />
解决方法
我无法重现您的问题。我使用JS直接隐藏div。
我的测试代码:
export default class ReactGetListItemsAddtoSelectTag extends React.Component<IReactGetListItemsAddtoSelectTagProps,any> {
public constructor(props) {
super(props);
this.state = {
items:[]
};
}
public render(): React.ReactElement<IReactGetListItemsAddtoSelectTagProps> {
const viewFields: IViewField[] = [{
name: "Title",displayName: "Title",isResizable: true,sorting: true,minWidth: 0,maxWidth: 150
},{
name: "ID",displayName: "ID",maxWidth: 200
}];
return (
<div className={ styles.reactGetListItemsAddtoSelectTag }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more</span>
</a>
</div>
</div>
<div id="test">
<ListView
items={this.state.items}
viewFields={viewFields}
iconFieldName="ServerRelativeUrl"
compact={true}
selectionMode={SelectionMode.multiple}
selection={this._getSelection}
showFilter={true}
filterPlaceHolder="Search..."
/>
</div>
<input type="button" value="change" onClick={this.handle}/>
</div>
</div>
);
}
handle(){
var div=document.getElementById("test");
var style=div.getAttribute("style");
if(!style){
div.setAttribute("style","display:none");
}else{
div.removeAttribute("style");
}
}
componentDidMount(){
let web = new Web(this.props.context.pageContext.web.absoluteUrl);
web.lists.getByTitle("testn").items.top(5).get().then(items=>{
console.log(items)
this.setState({items})});
}
private _getSelection(items: any[]) {
console.log('Items:',items);
}
}
已更新:
componentDidMount() {
let web = new Web(this.props.context.pageContext.web.absoluteUrl);
web.lists.getByTitle("testn").items.top(5).get().then(items => {
console.log(items)
this.setState({ items })
});
setTimeout(()=>$("#listView_id").hide(),2000);
}
,
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",maxWidth: 150
},{
name: "ID",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);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。