Переключите фоновое приложение, нажав кнопку в ReactJs - PullRequest
Новая
       25

Переключите фоновое приложение, нажав кнопку в ReactJs

0 голосов
/ 01 мая 2020

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

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

function App() {
  const [backgroundColor, setBackgroundColor] = useState("#673ab7");

  const setStyle = (backgroundColor) => {
    setBackgroundColor(!backgroundColor);
  };

  return (
    <div>
      <GlobalStyle />
      <Header setStyle={setStyle} backgroundColor={backgroundColor} />
      <Weather backgroundColor={backgroundColor} />
      <Footer />
    </div>
  );
}

export default App;

Компонент с кнопкой 

export const Header = ({ setStyle, backgroundColor }) => {
  return (
    <header>
      <HeaderApp>
        <HeaderTitle>Your Weather App</HeaderTitle>
        <ButtonForm onClick={() => setStyle("#fff")}>
          {backgroundColor === "#673ab7"
            ? "Change Background"
            : "Previous Background"}
        </ButtonForm>
      </HeaderApp>
    </header>
  );
};

Ответы [ 2 ]

0 голосов
/ 01 мая 2020

вы можете использовать код, предоставленный @Jesse Locas, или ваш код также отлично работает с некоторыми изменениями, 

const setStyle = (newColor) => {
    setBackgroundColor(newColor);
};

измените свой параметр backgroundColor на newColor, чтобы ваш state backgroundColor не конфликтовал при настройке нового фона цвет и нет необходимости !.

Я надеюсь, это поможет вам.

Спасибо.

0 голосов
/ 01 мая 2020

Ну, во-первых, вам нужно инициализировать состояние фона: 

const Color_One = "#000";
const Color_Two = "#fff";
const [Background, setBackground] = useState(Color_One);

, а затем вам нужно создать функцию, которая будет обрабатывать событие нажатия: 

const onChangeBackground = e => {

   e.preventDefault();

   if(Background === Color_One){

      setBackground(Color_Two);
   }
   else {

      setBackground(Color_One);
   }
}

И, наконец, в вашем компоненте формы кнопки: 

   <ButtonForm onClick={onChangeBackground}>
      // some code
    </ButtonForm>
...