目前我的列表都有折叠,但它们链接到一个“打开”的状态,所以如果我打开一个列表,所有其他列表都打开。什么是最好的方法来保持崩溃彼此分开,而不为每个列表提供大量的状态。
interface IState {
error: any,
intro: any,
threads: any[],
title: any,
}
export default class App extends React.Component<{}, IState> {
constructor (props : any) {
super (props);
this.state = {
error: "",
intro: "Welcome to RedQuick",
threads: [],
title: ""
};
this.getRedditPost = this.getRedditPost.bind(this)
this.handleClick = this.handleClick.bind(this)
}
public getRedditPost = async (e : any) => {
e.preventDefault();
const subreddit = e.target.elements.subreddit.value;
const redditAPI = await fetch('https://www.reddit.com/r/'+ subreddit +'.json');
const data = await redditAPI.json();
console.log(data);
if (data.kind) {
this.setState({
error: undefined,
intro: undefined,
threads: data.data.children,
title: data.data.children[0].data.subreddit.toUpperCase()
});
} else {
this.setState({
error: "Please enter a valid subreddit name",
intro: undefined,
threads: [],
title: undefined
});
}
}
public handleClick = (index : any) => {
this.setState({ [index]: true });
}
public render() {
return (
<div>
<Header
getRedditPost={this.getRedditPost}
/>
<p className="app__intro">{this.state.intro}</p>
{
this.state.error === "" && this.state.title.length > 0 ?
<LinearProgress />:
<ThreadList
error={this.state.error}
handleClick={this.handleClick}
threads={this.state.threads}
title={this.state.title}
/>
}
</div>
);
}
}
ThreadList.tsx
<div className="threadlist__subreddit_threadlist">
<List>
{ props.threads.map((thread : any, index : any) =>
<div key={index} className="threadlist__subreddit_thread">
<Divider />
<ListItem button={true} onClick={props.handleClick(index)}/* component="a" href={thread.data.url}*/ >
<ListItemText primary={thread.data.title} secondary={<p><b>Author: </b>{thread.data.author}</p>} />
{props[index] ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={props[index]} timeout="auto" unmountOnExit={true}>
<p>POOP</p>
</Collapse>
<Divider />
</div>
) }
</List>
</div>
您必须为每次折叠创建不同的状态,我建议动态地使用从map函数获得的索引setState,您可能必须将索引param传递给handleClick函数,并在此基础上更改状态
<div className="threadlist__subreddit_threadlist">
<List>
{ props.threads.map((thread : any, index : any) =>
<div key={index} className="threadlist__subreddit_thread">
<Divider />
<ListItem button={true} onClick={props.handleClick(index)}/* component="a" href={thread.data.url}*/ >
<ListItemText primary={thread.data.title} secondary={<p><b>Author: </b>{thread.data.author}</p>} />
{props[index] ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={props[index]} timeout="auto" unmountOnExit={true}>
<p>POOP</p>
</Collapse>
<Divider />
</div>
) }
</List>
</div>
您的手舔应该如下所示:
public handleClick = (index : any) => {
this.setState({ [index]: true });
}
我有活动,包含视页。此视图页包含2个片段。每个片段都包含CoordinatorLayout、CollapsingToolbarlayout、AppBarLayout、Toolbar和RecycerView如果我在一个RecycerView中向下滚动,是否有任何方法,我如何通过编程强制折叠第二个CollapsingToolbarLayout依赖于第一个CollapsingToolbarLayout?
主要内容:JavaFX多边形折线JavaFX多边形折线 多边形,一个简单的示例代码如下所示 - 上面的代码生成以下结果。 折线示例,一个简单的示例代码如下所示 - 上面的代码生成以下结果。
在上一章中,我们学习了如何添加各种形状,如圆形,多边形,矩形,折线等。在本章中,我们将讨论如何添加多边形,多边形和折线。 Multi-Polyline 要使用Leaflet JavaScript库在地图上绘制多折线叠加层,请按照以下步骤操作 - Step 1 - 通过传递“ div ”元素(字符串或对象)和映射选项(可选)来创建Map对象。 Step 2 - 通过传递所需图块的URL来创建Laye
我需要将“+/-”列名折叠为一个列名并添加计数。下面是数据集的一个示例。 我想将那些-/+col名称折叠为no sign列名并将其相加。 有什么想法吗?
我想创建一个包含三条线(男性、女性、未知)的折线图。这是我的数据示例: 是否有一个选项,在图中自动创建三行或我需要循环通过数据和创建三个跟踪自己?到目前为止,这是我的代码:
我面临着一个问题,与CollapsePanel。 当事件被触发时,我需要更改它的标题。到目前为止,我覆盖了BorderLayout的createCollapsePanel,并向我需要的事件添加了一个侦听器: 上面的代码执行得很好,但是结果CollapsePanel永远不会获得新标题。 我是不是遗漏了什么?谢谢