javascript - React Material onClick Collapse [答案已更新]

Question

我有一个包含一些详细信息列表的组件。组件中的每个列表都有一个“详细信息”按钮。当用户单击按钮时。它将显示列表的附加信息。在这里，我将 Material-Ui 与 React 结合使用，并为此目的导入了 Collapse 组件。因此，正如您在下面看到我的代码一样，当我单击一个列表中的详细信息按钮时，它将打开所有列表的详细信息。我只想打开列表，我单击。请检查下面我的代码

提前致谢。

import React, { Component } from 'react';
import Collapse from '@material-ui/core/Collapse';
import Button from '@material-ui/core/Button';


class Collapsed extends Component {
    constructor(props){
        super(props);
        this.state = {
            expanded: {},
            details: [
                {
                    id: 0,
                    name: 'Tony Stark',
                    role: 'Iron Man' 
                },
                {
                    id: 1,
                    name: 'Steve Rogers',
                    role: 'Captain America',
                },
                {
                    id: 2,
                    name: 'Thor',
                    role: 'God of Thunder'
                }
            ]
        }
    }
    handleExpandClick = (id) => {
        const expended = this.state.expended;
        expended[id] = expended.hasOwnProperty(id) ? !expended[id] : true
        this.setState({ expended });
      }
  render() {
      const { details, expanded } = this.state;
    return (
      <div>
        {details.map((detail)=>(
            <div key={detail.id}>
                {detail.name}
                <Button 
                    variant="contained"
                    disableRipple  
                    onClick={() => this.handleExpandClick(detail.id)}
                    aria-expanded={expanded}
                    aria-label="Show more"
                >
                    Details
                </Button>
                <Collapse in={expanded[detail.id]} timeout="auto" unmountOnExit>
                    {detail.role}
                </Collapse>
            </div>    
        ))}
      </div>
    )
  }
}

export default Collapsed

Answer 1

您可以使用一个包含每个详细信息 ID 的对象，而不是使用一个变量将“扩展”值存储为 bool 值。

    import React, { Component } from 'react';
import Collapse from '@material-ui/core/Collapse';
import Button from '@material-ui/core/Button';


class Collapsed extends Component {
    constructor(props){
        super(props);
        this.state = {
            expanded: {},
            details: [
                {
                    id: 0,
                    name: 'Tony Stark',
                    role: 'Iron Man' 
                },
                {
                    id: 1,
                    name: 'Steve Rogers',
                    role: 'Captain America',
                },
                {
                    id: 2,
                    name: 'Thor',
                    role: 'God of Thunder'
                }
            ]
        }
    }
    handleExpandClick = (id) => {
        this.setState({ expanded: ...this.state.expanded, [id] : true });
      };
  render() {
      const {details, expanded} = this.state;
    return (
      <div>
        {details.map((detail)=>(
            <div key={detail.id}>
                {detail.name}
                <Button 
                    variant="contained"
                    disableRipple  
                    onClick={()=>this.handleExpandClick(detail.id)}
                    aria-expanded={expanded}
                    aria-label="Show more"
                >
                    Role
                </Button>
                <Collapse in={expanded[detail.id]} timeout="auto" unmountOnExit>
                    {detail.role}
                </Collapse>
            </div>    
        ))}
      </div>
    )
  }
}

export default Collapsed

如果您想关闭扩展的详细信息，您可以使用句柄函数，例如:

handleExpandClick = (id) => {
  let expended = this.state.expended;
  expended = expended.hasOwnProperty(id) ? !expended[id] : true
  this.setState({ expended });
}