当前位置: 首页 > 知识库问答 >
问题:

React Material UI多重折叠

穆鸿波
2023-03-14

目前我的列表都有折叠,但它们链接到一个“打开”的状态,所以如果我打开一个列表,所有其他列表都打开。什么是最好的方法来保持崩溃彼此分开,而不为每个列表提供大量的状态。

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>

共有1个答案

万高洁
2023-03-14

您必须为每次折叠创建不同的状态,我建议动态地使用从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永远不会获得新标题。 我是不是遗漏了什么?谢谢