gpt4 book ai didi

javascript - 将 onClick 设置为 false

转载 作者:行者123 更新时间:2023-11-28 16:52:47 25 4
gpt4 key购买 nike

我目前有一个使用 slider 来提供表格的附加详细信息的表格。当 slider 组件打开时,我有一个 X 来靠近 slider 。我试图让 X 关闭 slider 并以原始形式显示表格。

这是一个代码沙箱: code sandbox

slider 组件:

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,以便它可以关闭 slider 组件。目前,单击 CloseIcon 后,它不会执行任何操作。

最佳答案

不要直接修改 props。

就像传入 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}}

关于javascript - 将 onClick 设置为 false,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59723875/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com