Блог

Я работаю над приложением react, в котором есть кнопка переключения. У меня есть компонент, который содержит основной контур кнопки переключения. Я могу заставить кнопку переключения работать в обычном HTML с помощью CSS. Я пытаюсь сделать то же самое в своей реакции. Создайте кнопку переключения с помощью jsx и css.

Возможно ли это? Если не следует использовать хук useState, как я могу это настроить.

Компонент

ToggleBtn.js

 const ToggleBtn = () => {
    return ( 
        <div class="space-around">
        <h3 className="h3">Annually</h3>
        <label className="switch">
            <input type="checkbox" checked/>
            <span className="slider"></span>
        </label>
        <h3 className="h3">Monthly</h3>
        </div>
     );
}
 

приложение.css

 .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0 10px;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}
.switch input {
  display: none;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: -20px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50px;
}
input:checked   .slider {
  background-color: var(--Purplish);
}
input:checked   .slider:before {
  transform: translateX(50px);
}
 

Мне удалось заставить это работать. Я создал компонент (кнопка переключения) в его собственном файле с файлом CSS, чтобы придать ему собственный стиль, и заставил его работать.

Это используемый код.

Switch.js

импорт реакции из ‘react’; импорт «./Switch.css»;

 const Switch = () => {
    return ( 
        <label className="switch1">
        <input type="checkbox"/>
        <span className="slider1"/>
        </label>
     );
}
 
export default Switch ;
 

Switch.css

 .switch1 {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch1 input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider1 {
  position: absolute;
  cursor: pointer;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 50px;
}

.slider1::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  bottom: 4px;
  left: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50px;
}
input:checked   .slider1::before {
  transform: translateX(26px);
}

input:checked   .slider1 {
  background-color: #2196f3;
}
 

Затем я импортировал компонент в свой исходный файл переключения.

 import Switch from "./components/Switch";

const ToggleBtn = () => {
    return ( 
        <div class="space-around">
        <h3 className="h3">Annually</h3>
        <Switch />
        <h3 className="h3">Monthly</h3>
        </div>
     );
}
 
export default ToggleBtn;