时间戳

首页 > 解决方案 > 单击按钮后组件应呈现 EditChannel 组件应呈现

reactjs - 单击按钮后组件应呈现 EditChannel 组件应呈现

问题描述

单击按钮后 EditChannel 组件应呈现。现在，如果我在单击按钮 EditChannel 之前重新渲染列表项的次数。点击后也会发生同样的情况。我只想要点击按钮后。请在下面找到代码行。点击 EditChannel 组件后应该渲染 Channel 卡组件

import React, { Fragment } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Typography, Button } from "@material-ui/core";
import Avatar from "@material-ui/core/Avatar";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { channelFollow, channelFetchById } from "../../../redux/action/channel";
import EditChannel from "../../Channels/List/Edit";


const ChannelCard = props => {
  const classes = useStyles();
  const { channel, channelFetchById } = props;
  const [open, setOpen] = React.useState(false);
  const handleClickOpen = () => {
    setOpen(true);
  };
  const view = (
    <div className={classes.card}>
      <Link to={`/channels/${channel._id}`} className={classes.link}>
        <div className={classes.root}>
          <Avatar
            alt="Remy Sharp"
            src={channel.avatar}
            className={classes.bigAvatar}
          />
        </div>

        <div className={classes.title}>
          <Typography
            variant="subtitle1"
            align="center"
            className={classes.text}
          >
            {channel.channelName}
          </Typography>
          <Typography variant="body2" align="center">
            {channel.introduction}
          </Typography>
        </div>
      </Link>
      <Typography variant="body2" align="center" className={classes.text1}>
        {channel.follows ? channel.follows.length : 0} followers <br />
        Language:{channel.language}
      </Typography>
      <div className={classes.center}>
        <div className={classes.button}>
          <div className={classes.buttons}>
            <Button
              variant="contained"
              color="primary"
              onClick={() => {
                channelFetchById(channel._id);
                handleClickOpen();
              }}
            >
              Edit
            </Button>
            {handleClickOpen ? (
              <EditChannel setOpen={setOpen} open={open} />
            ) : null}
          </div>
          <div>
            <Button color="primary" variant="contained">
              Delete
            </Button>
          </div>
        </div>

        <br />
      </div>
    </div>
  );
  return <Fragment>{view}</Fragment>;
};
export default connect(null, { channelFollow, channelFetchById })(ChannelCard);

标签： reactjsreact-redux

解决方案

我猜不是 handleClickOpen 只有 open 会像这样工作，

   {open ? (
     <EditChannel setOpen={setOpen} open={open} />
   ) : null}

因为 handleClickOpen 是点击事件而不是布尔变量

推荐阅读