React-Materialize - Как отключить поведение CollapsibleItem - PullRequest
0 голосов
/ 15 февраля 2019

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

Есть идеи?Джулс.

...