Блог

Главная - Вопросы по программированию - Реагировать: Как изменить непрозрачность элемента, нажав кнопку?

Реагировать: Как изменить непрозрачность элемента, нажав кнопку?

#javascript #html #reactjs

Вопрос:

Я хочу изменить непрозрачность headerInside элемента с помощью React.

Мне пришла в голову эта идея, но с использованием ванильного JS.
Как написать его с помощью крючков React?

 const menuHandler = () => {
  const element = document.querySelector('.headerInside');
  
  if (element.style.opacity === "1") {
    element.style.opacity = "0";
  } else {
    element.style.opacity = "1";
  }
}

return() Раздел выглядит следующим образом:

 <header>
  <button onClick={menuHandler} className="brgr">test</button>
  <div className="headerInside">
    ...  
  </div>
</header>

Ответ №1:

В ответе Зрны был смысл. Я хочу немного изменить это .

 ...
     <button onClick={() => setOpacity(1-opacity)} className="brgr">test</button>
...

Ответ №2:

Вы можете сделать что-то подобное, используя крючки React:

 const [opacity, setOpacity] = useState(0);

return (
  <header>
    <button onClick={() => setOpacity(1)} className="brgr">test</button>
    <div style={{ opacity }}>
      ...  
    </div>
  </header>
);

Комментарии:

1. Можете ли вы объяснить, почему это так работает? Я действительно не понимаю ,,style={{ непрозрачность }}» часть. Откуда он знает, что должен установить непрозрачность на 1?

2. @NatanKrakowiak это аббревиатура, если свойство и переменная имеют одно и то же имя. style={{ opacity: opacity }} == style={{ opacity }}

Метки: ,