2

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

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

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

1
  • 1
    Суть Реакта - работать от стейта. Раздавать значения классов "как раньше" - не его путь. Тебе нужно иметь стейт, который будет отвечать за видимость элемента. А сам элемент по значению этого стейта будет либо виден... Либо нет.
    – ksa
    12 мая в 12:56

2 ответа 2

4

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

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>

3

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

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

//
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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.