React Material onClick折叠[答案更新]

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的对象，而不必使用一个变量将“ expended”值存储为布尔值。

    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 });
}

Answer 2

尝试一下

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

class Collapsed extends Component {
    constructor(props) {
        super(props);
        this.state = {
            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) {
        console.log(this.state[`expanded_${id}`]);
        this.setState({ [`expanded_${id}`]:  _.isUndefined(this.state[`expanded_${id}`])?true:!this.state[`expanded_${id}`] });
    };
    render() {
        const { details, expanded } = this.state;
        return (
            <div>
                {details.map((detail) => (
                    <div key={detail.id}>
                        {detail.name}
                        <Button
                            variant="contained"
                            disableRipple
                            onClick={this.handleExpandClick.bind(this,detail.id)}
                            aria-expanded={this.state[`expanded_${detail.id}`] || false}
                            aria-label="Show more"
                        >
                            Role
                </Button>
                        <Collapse in={this.state[`expanded_${detail.id}`] || false} timeout="auto" unmountOnExit>
                            {detail.role}
                        </Collapse>
                    </div>
                ))}
            </div>
        )
    }
}

export default Collapsed

Answer 3

带钩子：

const [expanded, setExpanded] = useState({});

    const handleClick = (id) => {
    setExpanded({
      ...expanded,
      [id]: !expanded[id]
    });
  }
<Collapse in={expanded[id]} timeout="auto" unmountOnExit>
    {detail.role}
 </Collapse>