@surerever

Как навесить правильно onClick на details?

Всем доброго времени суток.
В коде (или тут) задаю для атрибута open false и при нажатии на details меняю его
this.setState({ details: !this.state.details }). Дело в том, что оно то работает, но при первом нажатии на details он сам не раскрывается. Через отдельную кнопку все работает.
Подробнее:
Если в open стоит false и сам details закрыт (open="false" по дефолту), то при нажатии details не раскрывается, а значение меняется на true. На второй клик раскрывается, значение false.
Если в open стоит trueи сам details открыт (open="true"), то при нажатии details не раскрывается, а значение меняется на false. На второй клик раскрывается, значение true.
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Показ/скрытие содержимого details при клике - это поведение по умолчанию, видимо, оно конфликтует с вашими попытками управлять состоянием details. Отменяйте действие по умолчанию при клике:

toggleDetails = (e) => {
  e.preventDefault();
  this.setState({ details: !this.state.details });
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
GeorgeGeorge
@GeorgeGeorge
Студент
Вот так работает как надо
toggleDetails = () => {
    this.setState({
      details: !this.state.details
    });
  };

<details open={this.state.details} onClick={() => this.toggleDetails}>
    <summary>Заголовок</summary>
     Вложение details
</details>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Leningrad Media Санкт-Петербург
от 100 000 до 150 000 ₽
Studyworld Санкт-Петербург
от 130 000 ₽
22 сент. 2020, в 08:35
14000 руб./за проект
22 сент. 2020, в 06:45
4000 руб./за проект
22 сент. 2020, в 03:43
35000 руб./за проект