1

我一直在玩 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() 没有做任何事情（我有一半预计它不会做）。

有任何想法吗？乔尔斯。

4

1 回答 1

0

我这样做的方式是根本不初始化可折叠并手动控制何时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"
  }
});

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

于 2020-11-13T14:31:12.763 回答