在 React 中使用 onClick 事件 map function

Question

我正在嘗試在 MUI 的列表組件上使用 map 循環嵌套的 object。 執行單擊時，所有元素都被單擊。

這是我的 class 組件：

class TablePivot extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            pivotData: [],
            firstLevelOpen: false,
            secondLevelOpen: false,
            thirdLevelOpen: false,
        }
    handleFirstListClick = () =>{
        this.setState({firstLevelOpen:!this.firstLevelOpen})
        console.log(this.secondLevelOpen)
    }

    handleSecondListClick = () =>{
        this.setState({secondLevelOpen:!this.secondLevelOpen})
        console.log(this.secondLevelOpen)
    }
    
    handleThirdListClick = () =>{
        this.setState({thirdLevelOpen:!this.thirdLevelOpen})
        console.log(this.thirdLevelOpen)
    }

    render () {
        
        return (
            <>
                
                <List>
                    {Object.entries(this.state.pivotData).map((key, val) =>{
                        // console.log(key[1])
                        return (
                        <ListItemButton onClick = {event => this.handleFirstListClick}>
                            <ListItemText primary={key[0]} />
                            {this.state.firstLevelOpen ? <ExpandLess /> : <ExpandMore />}
                            {Object.entries(key[1]).map((key,index) =>{
                                return (
                                    <Collapse in={this.state.firstLevelOpen} timeout="auto" unmountOnExit>
                                        <List component="div" disablePadding>
                                        <ListItemButton onClick = {this.handleSecondListClick} sx={{ pl: 4 }}>
                                            <ListItemText primary={key[0]} />
                                            {this.state.secondLevelOpen ? <ExpandLess /> : <ExpandMore />}
                                            {Object.entries(key[1]).map((key,index) =>{
                                                    <Collapse in={this.state.secondLevelOpen} timeout="auto" unmountOnExit>
                                                        <List component="div" disablePadding>
                                                        <ListItemButton onClick = {this.handleThirdListClick} sx={{ pl: 4 }}>
                                                            <ListItemText primary={key[1]} />
                                                            {this.state.thirdLevelOpen ? <ExpandLess /> : <ExpandMore />}
                                                            {/* {
                                                                Object.entries(key[1]).map((key,index) =>{
                                                                    return (console.log[key])
                                                                })
                                                            } */}
                                                        </ListItemButton>
                                                        </List>
                                                    </Collapse>
                                                })
                                            }
                                        </ListItemButton>
                                        </List>
                                    </Collapse>
                                    
                                )
                            })}
                        </ListItemButton>
                    )
                    
                    
                    })}
                </List>

                
                
                <Snackbar anchorOrigin={{ vertical : "top", horizontal : "right" }} open={this.state.alert} autoHideDuration={5000} onClose={() => this.setState({alert : false})}>
                    <Alert variant="filled" elevation={6} onClose={() => this.setState({alert : false})} severity={this.state.severity}>
                        {this.state.alertMsg}
                    </Alert>
                </Snackbar>
            </>
        )
    }

我試過在 onclick 中傳遞索引和事件，如下所示：

handleFirstListClick(event, index) {
        console.log(event.target)

        this.setState(
            prevState => ({
                ...prevState.firstLevelOpen,
                [index]: !prevState.firstLevelOpen
            })
        )

        console.log(this.state.firstLevelOpen)


        // if (this.state.firstLevel === true)
        //     firstLevel[index] = false
        // else
        //     firstLevel[index] = true

        // this.setState({firstLevelOpen:firstLevel});

    }

// Changes inside render() inside list component for passing value
<ListItemButton onClick = {event => this.handleFirstListClick(event, val)}>

但這樣做不會正確更新 state。 我不明白出了什么問題。 我正在學習使用項目做出反應。 我為這個點擊事件苦苦掙扎。

Answer 1

當您單擊第一個ListItemButton時，它將firstLevelOpen state 設置為true 。

在這部分代碼{this.state.firstLevelOpen? <ExpandLess />: <ExpandMore />} {this.state.firstLevelOpen? <ExpandLess />: <ExpandMore />}因為firstLevelOpen現在為true ，所有第一級ExpandLess組件都將可見。

要處理列表中每個按鈕的 state，您可以將 state 從 boolean 更改為 ZA8CFDE63131BD59EB2AC9ZC966F 您已經做的與下面的代碼非常相似。

this.state = {
    pivotData: [],
    firstLevelOpen: {},
    secondLevelOpen: {},
    thirdLevelOpen: {},
}

在點擊處理程序上

handleFirstListClick(event, index) {
    this.setState(
        prevState => ({
            firstLevelOpen: {
                ...prevState.firstLevelOpen,
                [index]: !prevState.firstLevelOpen[index]
            }
        })
    )
}

我還沒有測試它，但我想它應該可以工作。