Блог

Главная - Вопросы по программированию - Как я могу использовать крючок useState, чтобы изменить цвет значков моей реакции на синий?

Как я могу использовать крючок useState, чтобы изменить цвет значков моей реакции на синий?

#javascript #reactjs #icons #use-state

Вопрос:

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

 const [changeColor, setChangeColor] = useState('blue');

а потом в ответ

 <IconOuter onClick={() => setChangeColor(changeColor)}>
  
  {item.icon}

Я хотел бы знать, что я делаю не так? Любая помощь была бы очень признательна. Спасибо.

При дальнейшем рассмотрении я стилизовал, используя стили компонентов, так что это мой css для значка. Похоже, что вокруг значков есть промежуток, который может быть проще стилизовать.

 const IconOuter = styled.span`
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  width: 44px;
  height: 44px;
  left: 8px;
  top: 8px;
`;

Ответ №1:

При использовании useState крючка вы создаете переменную и метод, переменная используется для хранения состояния, а метод-для изменения значения переменной. Начальное значение переменных получается из значения внутри useState крючка, и вы можете изменить это значение, используя метод, который вы определили с useState помощью крючка

Это основная форма крючка useState:

 const [state, setState] = UseState(<initial state>)

Поэтому ваш код должен быть :

 const [myColor, setmyColor] = useState('white'); //the color is currently white

<IconOuter onClick={() => setColor('blue')} />

const IconOuter = styled.span`
  background-color: ${ myColor };
  border-radius: 5px;
  padding: 10px;
  width: 44px;
  height: 44px;
  left: 8px;
  top: 8px;
`;

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

1. Привет, спасибо, что вернулись. Я только что попробовал это, но, похоже, это не работает. Это то, что я сделал const [changeColor, setChangeColor] = useState('white'); , и это мое возвращение return ( <> <SidebarLink to={item.path} onClick={showSubnav}> <IconOuter onClick={() => setChangeColor('blue')}> {item.icon} </IconOuter> </SidebarLink> </> ); }; , может быть, потому, что у меня уже есть onclick выше?

2. @Mahier кодовое поле было бы более полезным.

Ответ №2:

Я вижу, что значение по умолчанию для этого состояния-синий, и в вашем коде вы просто вызываете setChangeColor и снова передаете «синий», поэтому, если вы нажмете на него снова и снова, все равно состояние будет синим, так как вы просто передаете «синий» в свой метод состояния changeColor(setChangeColor()). Поэтому я просто вижу, что состояние все время получает то же значение, что и значение по умолчанию. Вы не поместили остальную часть кода, но в этом небольшом фрагменте кода, которым вы поделились здесь, я вижу, что вы нигде не используете это значение состояния.

Ответ №3:

Вы можете попробовать встроенный CSS как

 <IconOuter onClick={()=>setChangeColor('blue')} style={{color:changeColor}}/>

Если вам нужен стиль компонента, попробуйте использовать color его вместо background-color CSS.

Метки: ,