1

если я правильно понял любое изменение в UI должно происходит через state (изменился state, UI перерисовалось)... есть меню-бургер он меняется по клику с X на -- как тут использовать state? или тут вообще нету смысла использовать state?

const Burger = (props) => {
const [state, setState] = useState('')
const toggleHandler = (event) => {
    event.target.classList.toggle('active')
}
return (
    <div 
    className="my"
    onClick={toggleHandler}
    ></div>
)
}

вот такое решение правильно или нету смысла

const Burger = (props) => {
const [isPressed, setPressed] = useState(false)
const toggleHandler = (event) => {
    setPressed(!isPressed)
    if(isPressed){
        event.target.classList.add('active')
    }
    else{
        event.target.classList.remove('active')
    }
}
return (
    <div 
    className="my"
    onClick={toggleHandler}
    ></div>
)

}

8
  • а так не работает?
    – azlov
    Commented 15 сент. 2020 в 12:27
  • @azlov работает прекрасно НО нету состояния это просто решение нативным js
    – Armen
    Commented 15 сент. 2020 в 12:31
  • а какая необходимость хранить имена классов в стейте?
    – azlov
    Commented 15 сент. 2020 в 13:01
  • @azlov это мой первый проект на react и мне желательно получить ответы пока что я не в состоянии отвечать на вопросы да и я не пытаюсь имя класса сохранить в state... у кнопки же есть состояние нажат(Х) или нет(--) мне надо понять надо ли такое реализовать через state и как
    – Armen
    Commented 15 сент. 2020 в 13:21
  • у вас в вопросе только про добавление/удаление классов через стейт сказано. что значит нажат(Х) или нет(--)
    – azlov
    Commented 15 сент. 2020 в 13:26

1 ответ 1

2

Ui изменяется при изменении состояния или пропсов, для изменения классов у элемента как беспрактис можно использо библиотеку classnames. Для изменения элемента напрямую можно использовать реферансы, но не надо злоупотреблять им, подробнее можешь прочитать в дорументации. В общем для самого примитивного примера могу показать такой код на основии твоего

const Burger = () => {

  const [isPressed, setPressed] = useState(false)

  const handleToggle = () => setPressed(!isPressed)

  return (
      <button 
        className={isPressed ? 'active': ''}
        onClick={toggleHandler}
      >Button</button>
  )
  
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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