Как сделать, чтобы функция выполнялась только при нажатии

Question

Есть блок, которому присвоил className и функция делает так, чтобы изменялся данный className.

    const showFilters = () => {
        document.getElementById('filters_strings').className='shown';
    }

у блока className изначально hidden, при нажатии на кнопку соответственно должен поменяться, onClick у кнопки имеется, но проблема в том, что значение в className присваивается еще до нажатия

Answer 1

Как сделать, чтобы функция выполнялась только при нажатии

Вот примерно такой принцип работы должен быть в Реакте на "нажатия" и на "показать/скрыть" элемент...

//
function App() {
  const [on, setOn] = React.useState(false)
  const showFilters = _ => {
    setOn(old => !old);
  }
  return <div>
    <button onClick={showFilters}>{on ? 'Выкл' : 'Вкл'}</button>
    {on && <p>Отлично!</p>}
  </div>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id="like_button_container"></div>

Answer 2

Вот еще один пример.

const App = () => {
  const [state, setState] = React.useState(false)
  
  return <div>
    <button onClick={() => setState(p => !p)}>
      {state ? 'Скрыть' : 'Показать'}
    </button>
    <div className={state ? 'shown' : 'hidden'}>
      Контент
    </div>
  </div>
}

const appContainer = document.querySelector('#app');
const root = ReactDOM.createRoot(appContainer);
root.render(<App />);

.hidden {
  display: none;
}

.shown {
  display: block;
}

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id="app"></div>

БЛОГ НА HUSL

Как сделать, чтобы функция выполнялась только при нажатии

Ответы (2 шт):