Onclick и Onclick в React.js ⇐ Html

[Anonymous]

У меня есть кнопка и две функции BloseOnclick и openonclick . Свойство OnClick устанавливается как OpenOnClick , в котором после выполнения желаемого процесса свойство OnClick установлено на CloseOnClick . После того, как я снова нажимаю кнопку как OnClick , так и onclick . После тестирования я обнаружил, что onclick и onclick разные.

Код: Выделить всё

function closeOnClick() {
let sidebar: HTMLElement = document.getElementsByClassName("list-items")[0] as HTMLElement;
let btn: HTMLElement = document.getElementsByClassName("open-sidebar-btn")[0] as HTMLElement;

sidebar.classList.remove('show');
btn.onclick = openOnClick;
console.log('closed menu and changed onclick to close')
}

function openOnClick() {
let sidebar: HTMLElement = document.getElementsByClassName("list-items")[0] as HTMLElement;
let btn: HTMLElement = document.getElementsByClassName("open-sidebar-btn")[0] as HTMLElement;

sidebar.classList.add('show');
btn.onclick = closeOnClick;
console.log('opened menu and changed onclick to close')
}
< /code>

click me

Когда я снова нажимаю кнопку, BloseOnClick и OpenOnClick запуска. />

Код: Выделить всё

let closed = true;

function closeOnClick() {
let sidebar: HTMLElement = document.getElementsByClassName("list-items")[0] as HTMLElement;
let btn: HTMLElement = document.getElementsByClassName("open-sidebar-btn")[0] as HTMLElement;

sidebar.classList.remove('show');
// btn.onclick = openOnClick;
console.log('closed menu and changed onclick to close')
closed = true
}

function openOnClick() {
let sidebar: HTMLElement = document.getElementsByClassName("list-items")[0] as HTMLElement;
let btn: HTMLElement = document.getElementsByClassName("open-sidebar-btn")[0] as HTMLElement;
if (closed) {
sidebar.classList.add('show');
btn.onclick = closeOnClick;
console.log('opened menu and changed onclick to close')
closed = false;
}
}

выглядит так, как будто onclick будет работать после OnClick , поэтому я использовал USESTATE , учитывая, что состояние изменяется после задержки, и после того, как все это сделано, если я прав.
, но это все больше.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... n-react-js