如何在反应中优先考虑一个钩子？

Question

const handleSelect = (e) => {
 //do something 

}

const handleChange = (e) => {
     setChecked(e.target.checked);
}


 return (
        <Grid
            container
            direction="row"
            justify="center"
            alignItems="center">
            <TreeItem
                onLabelClick={handleSelect}
                nodeId={nodeId}
                label={
                    <div>
                        <Checkbox
                            checked={checked}
                            onChange={handleChange}
                        />
                        {literal}
                    </div>}
                onNodeToggle={handleToggle}
            >
            </TreeItem>
        </Grid>
    )
}

尝试创建一个带有复选框的 TreeView。我遇到的唯一问题是单击复选框时，也会展开树，这不是我想要的行为。

如果选择了 handleChange（复选框），如何覆盖 onLabelClick 使其不执行？

Answer 1

听起来您可能想用 stopPropagation 防止事件冒泡。

所以你的 handleChange 函数是

const handleChange = (e) => {
    e.stopPropagation()
    setChecked(e.target.checked);
}