javascript - 将onClick设置为false

我目前有一个使用滑块的表格，用于提供表格的其他详细信息。当滑块组件打开时，我有一个X靠近滑块。我试图让X关闭滑块并以原始形式显示表格。

这是一个代码沙箱：
code sandbox

滑块组件：

function ExpandToggle(isOpenProps) {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <Button>
        <ArrowForwardIosIcon size="small" onClick={toggle} />{" "}
      </Button>
      <SliderInfo open={isOpen} />
    </>
  );
}

具有onClick={open=false}的SliderInfo组件

export default function SliderInfo({ open }) {
  const classes = useStyles();



  return (
    <Slide direction="left" in={open} mountOnEnter unmountOnExit>
      <div className={classes.root}>
        <Grid container>
          <Grid item>
            <Typography variant="h6">Vanila Ice Cream</Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">Chocolate Ice Cream</Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">Strawberry Ice Cream</Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">Sherbert </Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">None</Typography>
          </Grid>
          <Grid item>
            <Button>
              <CloseIcon onClick={open=false} />
            </Button>
          </Grid>
        </Grid>
      </div>
    </Slide>

在CloseIcon上，我正在尝试设置一个onClick，它从Slider传递给false，以便它可以关闭滑块组件。在单击CloseIcon时，它什么也不做。

最佳答案

不要直接修改道具。

传递切换功能就像传递open变量一样，然后调用它。

<SliderInfo open={isOpen} toggleOpen={toggle} />

// In Sliderinfo
export default function SliderInfo({ open, toggleOpen }) {
...
<CloseIcon onClick={toggleOpen} />

如果您的切换开关没有达到相同的目的，请创建一个新函数，仅将isOpen设置为false并使用它。

还要记住，onClick需要一个功能。因此open=false实际上是在渲染过程中执行的，而不是单击之后执行的。正确的内联格式为onClick={(e) => {//do stuff}}。