时间戳

首页 > 解决方案 > 如何使用 reactjs 从列表中隐藏特定用户？

reactjs - 如何使用 reactjs 从列表中隐藏特定用户？

问题描述

我试图通过单击 3 点图标来隐藏特定用户，但不知道如何隐藏它。此外，我想随时切换隐藏选项卡和示例选项卡。

这是代码：

{Data.map(user => (
          <CardHeader
            key={user.id}
            className={classes.header}
            avatar={<Avatar aria-label="recipe">R</Avatar>}
            action={
              <div className={this.state.menu && classes.menu}>
                <IconButton
                  id="simple-menu"
                  className={classes.showIcon}
                  aria-label="settings"
                  aria-controls="simple-menu"
                  onClick={this.handleClick}
                >
                  <MoreVertIcon />
                </IconButton>
                <Menu
                  style={{ marginTop: "35px" }}
                  id="simple-menu"
                  keepMounted
                  anchorEl={this.state.menu}
                  open={Boolean(this.state.menu)}
                  onClose={this.handleClose}
                >
                  <MenuItem onClick={this.handleClose}>View</MenuItem>
                  <MenuItem onClick={this.handleClose}>hide</MenuItem>
                </Menu>
              </div>
            }
            title={user.title}
            subheader={user.subheader}
          />
        ))}

这是示例代码

任何人都可以在这个查询中帮助我吗？

标签： reactjs

解决方案

在您的代码中添加这些...

import React from "react";
import "./styles.css";
import Sample from "./Sample";
import Hide from "./Hidden";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isHide: false };
  }

  onHandleHide = () => {
    this.setState({ isHide: false });
  };

  onHandleshow = () => {
    this.setState({ isHide: true });
  };

  render() {
    return (
      <div>
        {!this.state.isHide ? (
          <Hide onShow={this.onHandleshow} />
        ) : (
          <Sample onHide={this.onHandleHide} />
        )}
      </div>
    );
  }
}
export default App;

在 Hidden.jsx 中添加这一行。

<MenuItem onClick={this.props.onShow}>Unhide</MenuItem>

和 Sample.jsx 文件添加这一行。

<MenuItem onClick={this.props.onHide}>hide</MenuItem>

我希望你的问题能解决。

这是沙盒链接

推荐阅读