Javascript React Materialize-如何禁用可折叠项行为

我一直在玩React Materialize来帮助我学习React，但是如果我有一个孩子在该CollapsableItem上有一个onClick处理程序，那么我遇到了CollapsableItem组件的一个问题

const HomeworkDetails = ({props}) => {

return (
    <Collapsible className="homework-list">
    {
        props.homeworks.map(hwork => {
            console.log(hwork.dateDue);
            return hwork.student === props.student ? (
            <CollapsibleItem className="card-content light-green purple-text text-darken-4" key={hwork._id} 
            header={<div><Col s={3}>{hwork.subject}</Col>
                         <Col s={3}>{hwork.dateSet.split("T")[0]}</Col>
                         <Col s={3}>{hwork.dateDue.split("T")[0]}</Col>
                         <Col s={3} onClick={(e) => {e.preventDefault(); alert('Hi');}}>{hwork.status}</Col>
                    </div>}>
                <h6 className="homework-list-h6">Details:</h6>
                {hwork.details}
            </CollapsibleItem>
            ) : null
        })
    }
    </Collapsible>
);

constHomeWorkDetails=（{props}）=>{
返回(
{
props.homeworks.map（hwork=>{
console.log（hwork.dateDue）；
返回hwork.student==props.student(
{hwork.status}
}>
细节：
{hwork.details}
)：null
})
}
);

}

这样做的目的是，当用户单击可折叠项上的第4列（这是家庭作业状态的位置）时，我想下拉一个允许状态的列表，以便用户可以更改它。我目前已经用一个简单的警报（下拉列表将是一个新组件）对此进行了修改，但一旦在执行onClick处理程序后警报被解除，则可折叠项将根据其当前状态展开/折叠

我想在用户单击这一个子项时禁止这种扩展/崩溃，但找不到阻止它的方法-e.preventDefault（）没有做任何事情（我有一半的预期它不会）

有什么想法吗？

---

Jools.

我这样做的方式是根本不初始化可折叠体，而是在显示

可折叠体时手动控制。这是常规的Materialize CSS，但我想它在React Materialize中的工作原理类似

例如，您将如何使用开关（使用Vanilla JS）控制可折叠文件：

下面是一个带有功能示例的代码笔：
我这样做的方式是根本不初始化可折叠体，而是在显示可折叠体时手动控制。这是常规的Materialize CSS，但我想它在React Materialize中的工作原理类似

例如，您将如何使用开关（使用Vanilla JS）控制可折叠文件：

下面是一个带有功能示例的代码笔：
您是否尝试过阻止单击事件传播而不是阻止默认事件<代码>e.停止播放（）我没有Thole-但我只是做了-不幸的是，这没有什么不同，但无论如何还是要感谢。您是否尝试过阻止单击事件传播，而不是阻止默认事件<代码>e.停止播放（）我没有Thole-但我只是做了-不幸的是这没有什么不同，但无论如何谢谢。
const addEmailCCSwitch = document.getElementById("add-email-cc-switch")
addEmailCCSwitch.addEventListener("click", (e) => {
  const isChecked = addEmailCCSwitch.querySelector('input').checked;
  if (isChecked) {
    document.querySelector('.collapsible-body').style.display = "block"
  } else {
    document.querySelector('.collapsible-body').style.display = "none"
  }
});