Задать вопрос
@75db77
javascript

Как переделать в React код переключение класса как в примере?

Как переделать в React код переключение класса как в примере?
html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="index.js"></script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
</body>
</html>


CSS:
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}


JS:
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.toggle("mystyle");
}
  • Вопрос задан
  • 1035 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 2
@i1yas
Вам нужно хранить состоние данного элемента, вопрос где. Компонент может принимать на вход пропс и коллбек onClick, либо компонент может внутри себя рулить состоянием и обрабаывать нажатие. Для первого вам понадобится либо родительский компонент с состоянием и функциями обработчиками, либо отдельное хранилище состояния. Вариант с внутренним хранением состояния проще (но не всегда подходит):
const Element = props => {
  const [styleEnabled, setStyle] = useState(false);

  return (
    <div
      className={`myDIV ${styleEnabled ? "mystyle" : ""}`}
      onClick={e => setStyle(!styleEnabled)}
    >
      Toggle me
    </div>
  );
};

Ссылка на песочницу
Ответ написан
2 комментария
2 комментария
rockon404
@rockon404 Куратор тега React
Frontend Developer
Необходимая теория:
Состояние и жизненный цикл
Использование хука состояния
Стилизация и CSS
Обработка событий
Вам бы я так же рекомендовал пройти tutorial.

Декомпозиция вашей задачи:
1. Завести ключ состояния типа boolean для определения необходимости в добавлении класса mystyle div-элементу, например isActive.
2. Повесить обработчик события click на кнопку.
3. Изменять по клику состояние на противоположное.
4. В зависимости от значения состояния isActive, либо добавляем класс mystyle div-элементу, либо нет.

Решение:
Шаг 1: Заводим ключ состояния

// class component example
class Example extends React.Component {
  state = {
    isActive: false,
  };

  render() {
    const { isActive } = this.state;

    return (
      <div>
        <button>Try it</button>
        <div>
          This is a DIV element.
        </div>
      </div>
    );
  }
}

// functional component example
const Example = () => {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <button>Try it</button>
      <div>
        This is a DIV element.
      </div>
    </div>
  );
}
Шаг 2: Вешаем обработчик события click на кнопку

// class component example
class Example extends React.Component {
  state = {
    isActive: false,
  };

  handleClick = () => {
  };  

  render() {
    const { isActive } = this.state;

    return (
      <div>
        <button onClick={this.handleClick}>Try it</button>
        <div>
          This is a DIV element.
        </div>
      </div>
    );
  }
}

// functional component example
const Example = () => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
  };

  return (
    <div>
      <button onClick={handleClick}>Try it</button>
      <div>
        This is a DIV element.
      </div>
    </div>
  );
}
Шаг 3: Изменяем по клику состояние на противоположное

// class component example
class Example extends React.Component {
  state = {
    isActive: false,
  };

  handleClick = () => {
    this.setState(state => ({ isActive: !state.isActive }));
  };  

  render() {
    const { isActive } = this.state;

    return (
      <div>
        <button onClick={this.handleClick}>Try it</button>
        <div>
          This is a DIV element.
        </div>
      </div>
    );
  }
}

// functional component example
const Example = () => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    setIsActive(s => !s);
  };

  return (
    <div>
      <button onClick={handleClick}>Try it</button>
      <div>
        This is a DIV element.
      </div>
    </div>
  );
}
Шаг 4: Добавляем логику установки значения класса в зависимости от состояния

// class component example
class Example extends React.Component {
  state = {
    isActive: false,
  };

  handleClick = () => {
    this.setState(state => ({ isActive: !state.isActive }));
  };  

  render() {
    const { isActive } = this.state;

    return (
      <div>
        <button onClick={this.handleClick}>Try it</button>
        <div className={isActive ? 'mystyle' : ''}>
          This is a DIV element.
        </div>
      </div>
    );
  }
}

// functional component example
const Example = () => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    setIsActive(s => !s);
  };

  return (
    <div>
      <button onClick={handleClick}>Try it</button>
      <div className={isActive ? 'mystyle' : ''}>
        This is a DIV element.
      </div>
    </div>
  );
}

P.S. Лучшее, что вы можете для себя сделать, это перестать просить готовые решения и пытаться решать задачи самостоятельно. Задачи всех ваших вопросов идентичны, но из-за того, что вы не пытаетесь их решить сами, они по-прежнему вызывают у вас затруднения. Для всего того, что вы спрашивали ранее, так же как и для этой задачи, достаточно простой декомпозиции и ознакомления с нужными разделами документации.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Casufi
@Casufi
https://ru.reactjs.org/docs/faq-styling.html
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать дизайн одежды
26 дек. 2024, в 21:12
2500 руб./за проект
Автоматизация ChatGPT и постинга
26 дек. 2024, в 21:01
10000 руб./за проект
Подготовка документации для производства платы
26 дек. 2024, в 20:52
40000 руб./за проект
Ещё заказы