Я пытаюсь изменить цвет фона div при наведении курсора с помощью React (однако я не хочу создавать для этого совершенно новый класс). Я понимаю, что мой синтаксис неверен, но я не смог найти «правильный» способ сделать это. Вот мой кодекс:

http://codepen.io/grapefruit0/pen/pRyOGG?editors=1010

В строке 37-42 вы увидите следующий фрагмент:

{
  if (hover){
      backgroundColor: "#b3ffff",

  }else{
      backgroundColor: "#b30000",
  }
}

Где зависание определяется следующим образом:

getInitialState(){
  return {hover: false};
}

mouseOver(){
  this.setState({hover: true});
}

mouseOut(){
  this.setState({hover: false});
}

Есть ли правильный способ сделать это?

1
wtk219 12 Янв 2017 в 18:51

3 ответа

Лучший ответ

Насколько я вижу, у вас есть несколько проблем:

Расширяя классы реакции, вы должны установить свое начальное состояние в конструкторе:

constructor(...props) {
  super(...props)
  this.state = {
    hover: false
  }
}

Вы определили функции mouseOut и mouseOver, но не сопоставили их с div:

return(
  <div style={boxStyle} 
       onMouseOver={this.mouseOver} 
       onMouseOut={this.mouseOut}>
  </div>
)

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

  mouseOver = () => this.setState({hover: true});
  mouseOut = () => this.setState({hover: false});

Обычно рекомендуется использовать троичный оператор javascript в фигурных скобках для JSX:

backgroundColor: this.state.hover?"#b3ffff":"#b300ff"

Рабочая ручка здесь: http://codepen.io/anon/pen/xgVywE?editors= 1010

0
user1641172user1641172 12 Янв 2017 в 16:24

Используйте this.state.hover вместо простого hover

backgroundColor: this.state.hover ? "#b3ffff" : "#b30000"
0
Invisible 12 Янв 2017 в 16:04

Вы можете использовать условный (троичный) оператор :

const boxStyle = {
      margin: 5,
      width: 30,
      height: 30,
      backgroundColor: this.state.hover ? "#b3ffff" : "#b30000",
      display: "inline-block",
      textAlign: "center"
}

Но я думаю, что лучшим способом в этом случае будет использовать только псевдокласс CSS :hover

1
Piotr Białek 12 Янв 2017 в 16:10