Блог

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

Как изменить цвет в реакции при нажатии кнопки с помощью состояния

#reactjs #use-effect #use-state

Вопрос:

я настроил состояние для изменения цвета моего фона

 const [bgClr, setBgClr] = useState('white');

Кнопка, цвета фона которой необходимо изменить, является

 <Button
            onClick={AnnualHandler}
            variant="outline-light"
            style={{ background: {bgClr} }}>
            <div
              className="pt-3 pb-3 ml-3 mr-3"
              style={{ background: '#f8f9fa' }}>
              <h4 style={{ color: 'var(--main)' }}>
                <b>$ 15</b>
              </h4>
            </div>
          </Button>

а обработчик-это

 const AnnualHandler = () => {
    setBgClr('yellow');
    console.log(bgClr);
  };

Но при нажатии цвет фона не меняется.
Следует ли здесь использовать эффект использования?

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

1. попробуйте это ` background: ${bgClr} `

Ответ №1:

Можно сделать вот так:

 // import React from "react";

const App = () => {
  const [bgClr, setBgClr] = React.useState("white");

  const annualHandler = () => {
    setBgClr("yellow");        
  };

  return (
    <div>
      <button
        onClick={annualHandler}
        variant="outline-light"
        style={{ background: { bgClr } }}
      >
        <div className="pt-3 pb-3 ml-3 mr-3" style={{ background: bgClr }}>
          <h4 style={{ color: "var(--main)" }}>
            <b>$ 15</b>
          </h4>
        </div>
      </button>
    </div>
  );
};

// export default App;

ReactDOM.render(<App />, document.getElementById('root')); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Ответ №2:

Основная проблема в вашем коде заключается в том, как вы задаете bgClr значение фона кнопки.

 <Button style={{ background: {bgClr} }}>

Не делай этого. Просто установите прямо bgClr на кнопку вот так.

 <Button style={{ background: bgClr }}>

Примечание :-

 const AnnualHandler = () => {
   setBgClr('yellow');
   console.log(bgClr);
};

Приведенный выше фрагмент кода показывает нам, что вы пытаетесь получить обновленное состояние после setBgClr запуска. Но этого не произойдет, потому что обновления состояния в React являются асинхронными. Так что вы получите старое значение даже после того, как измените цвет на yellow .

Ресурс — https://reactjs.org/docs/state-and-lifecycle.html

Полный Код

 import { useState } from "react";

export default function App() {
  const [bgClr, setBgClr] = useState("white");

  const AnnualHandler = () => {
    setBgClr("yellow");
  };

  return (
    <button onClick={AnnualHandler} style={{ background: bgClr }}>
      Change
    </button>
  );
}

Codesandbox — https://codesandbox.io/s/change-the-color-of-the-button-69327076-wpgyj?file=/src/App.js

Ответ №3:

Вам необходимо присвоить фактическое значение bgClr , в то время как вы присваиваете объект:

 style={{ backgroundColor: bgClr }}>

Ответ №4:

Вы все сделали правильно, но только атрибут css background 

 style={{ background: bgClr }}

Правильный путь-это

 style={{ backgroundColor: bgClr }}>
Метки: