Блог

Главная - Вопросы по программированию - Как написать случаи переключения в функции в react с помощью крючков

Как написать случаи переключения в функции в react с помощью крючков

#reactjs

Вопрос:

Я работаю над проектом React, в котором у меня есть кнопка, для этой кнопки я написал одну функцию для изменения цвета фона, но мне точно нужно, чтобы размер устройства составлял 320 пикселей, а затем, когда я нажимаю кнопку, цвет фона должен измениться на красный. Опять же, если размер устройства составляет 768 пикселей, то, когда я нажимаю кнопку, цвет фона должен измениться на зеленый. для этого я пытаюсь использовать регистр переключения, но я не знаю, как написать регистр переключения в функции, поэтому, пожалуйста, помогите мне достичь этого

Это мой код

Это App.js

 import React, { useState, useEffect } from 'react';
import './App.css';

const App = () => {
  const [backGroundColor, setBackGroundColor] = useState(null)

  const [deviceSize, changeDeviceSize] = useState(window.innerWidth);

  const changeBackGroundColor = () => {
    console.log(deviceSize, '***')
    setBackGroundColor({
      backgroundColor: 'red'
    })
    switch (deviceSize === 320) {
      
    }
  }

  useEffect(() => {
  }, [])

  
  return (
    <div className='container'>
      <div className='row'>
        <div className='col-12'>
          <div className='first'>
            <button onClick={changeBackGroundColor} style={backGroundColor} className='btn btn-primary'>Click here</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать. Спасибо

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

1. Почему бы вам не использовать медиа-запрос?..

Ответ №1:

если вам нужен чехол-переключатель, вы можете сделать вот так:

 switch (deviceSize) {
  case 320: 
    setBackGroundColor({
      backgroundColor: 'red'
    });
    break;
  case 768: 
    setBackGroundColor({
      backgroundColor: 'green'
    });
    break;
}

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

1. Привет @Viet Я очень благодарен за ваш ответ, но в моем коде изначально возникает проблема, когда размер моего устройства составляет 320 пикселей, в то время цвет фона начальной кнопки синий, когда я нажимаю на нее, затем цвет фона меняется на красный, теперь, когда я перехожу на 768 пикселей, здесь также отображается только красный фон. не могли бы вы, пожалуйста, рассказать мне, как исправить эту проблему.

2. Если вы хотите изменить цвет при изменении размера окна, вы можете использовать addEventListener('resize', yourFunction);

Ответ №2:

Лучший способ сделать это-использовать медиа-запрос.

Фон будет автоматически меняться при изменении размера экрана.

App.js

 import React, { useEffect, useState } from 'react';
import './App.css';

const App = () => {
  const [btnClass, setBtnClass] = useState();

  useEffect(() => {
    setBtnClass('btn btn-primary');
  }, []);

  const onClick = (e) => {
    setBtnClass('btn btn-active');
  }

  return (
    <div className='container'>
      <div className='row'>
        <div className='col-12'>
          <div className='first'>
            <button
              onClick={onClick}
              className={btnClass}
            >Click here</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App;

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

 .btn {
  background-color: yellow;
}

@media screen and (min-width: 320px) {
  .btn-active {
    background-color: red;
  }
}

@media screen and (min-width: 768px) {
  .btn-active {
    background-color: green;
  }
}
``
Метки: