Я играл с 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 () ничего не делает (и я наполовину ожидал, что этого не произойдет).
Есть идеи?Джулс.