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

Question

[surerever]

Всем доброго времени суток.
В коде (или тут) задаю для атрибута 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.

Answer 1

[0xD34F]

Показ/скрытие содержимого details при клике - это поведение по умолчанию, видимо, оно конфликтует с вашими попытками управлять состоянием details. Отменяйте действие по умолчанию при клике:

toggleDetails = (e) => {
  e.preventDefault();
  this.setState({ details: !this.state.details });
}

Answer 2

[Lorem Ipsum]

Вот так работает как надо

toggleDetails = () => {
    this.setState({
      details: !this.state.details
    });
  };

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

Comments

[Lorem Ipsum]

surerever, не совсем, onClick={() => this.toggleDetails} - решение проблемы, если я правильно понял вопрос

[surerever]

Lorem Ipsum, от стыда удалил комментарий. Голова не соображает. А в вашем варианте не изменяется стейт details https://codesandbox.io/s/goofy-saha-lhnmv

[Lorem Ipsum]

surerever, я думаю если бы state не менялся, то и details не открывался бы

[surerever]

Lorem Ipsum, он остаётся false.

[Lorem Ipsum]

surerever, видимо я уже тоже не соображаю)

[abberati]

Lorem Ipsum, вы toggle не вызываете