React-Materialize - Как отключить поведение CollapsibleItem

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

}

Намерение состоит в том, что когда пользователь нажимает на 4-й столбец, который находится на CollapsibleItem (это то, где будет статус домашней работы), я хочу раскрыть список допустимых состояний, чтобы пользователь мог его изменить. В настоящее время я заглушил это с помощью простого оповещения (выпадающий список будет новым Компонентом), но как только оповещение будет отклонено после выполнения обработчика 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"
  }
});

Вот код с функциональным примером: https://codepen.io/dsudomoin/pen/zYBeYyW