Question

我一直在玩React-Materialize来帮助我学习React，但是如果我的孩子在CollapsibleItem上有一个onClick处理程序，我会遇到CollapsibleItem组件的问题。

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>
);

}

目的是，当用户单击CollapsibleItem上的第4列（这是作业状态的位置）时，我要下拉允许状态列表，以便用户可以对其进行更改。我目前使用简单的警报（下拉菜单将是一个新的组件）对它进行了处理，但是一旦在执行onClick处理程序后解除了警报，CollapsibleItem就会根据其当前状态进行扩展/折叠。

当用户单击一个孩子时，我想禁止这种扩展/折叠，但是找不到阻止它的方法-e.preventDefault（）不会做任何事情（而且我一半预计不会））。

有什么想法吗？乔尔斯。

Answer 1

我这样做的方法是根本不初始化可折叠对象，并手动控制何时显示collapsible-body。这是使用常规Materalize CSS进行的，但我想它在React-Materialize中的工作原理类似。

例如，在这里如何使用开关（使用Vanilla JS）控制可折叠对象：

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"
  }
});

这是一个带有功能示例的Codepen：https://codepen.io/dsudomoin/pen/zYBeYyW

React-Materialize-如何禁用CollapsibleItem行为

1 个答案: