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

除了使用一个变量将 "expended" 值存储为布尔值，您还可以使用一个包含每个详细信息 ID 的对象。

    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

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

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>

React Material onClick Collapse [答案已更新]

React Material onClick Collapse [Answer Updated]

javascript

reactjs

material-ui

react-material