Как сделать только один элемент для изменения onHover (ReactJS) - PullRequest
Новая
       8

Как сделать только один элемент для изменения onHover (ReactJS)

0 голосов
/ 23 января 2019

, поэтому я пытаюсь изменить цвет элемента при наведении курсора, меняя состояние, проблема в том, что все элементы меняются из-за состояния. Как сделать так, чтобы изменился только один элемент?

ссылка на проблему: https://repl.it/@RokasSimkus/TediousTestyOctagons

class App extends Component {
    state={
    hover:false
  }
  render() {
    let onHover = () =>{
  this.setState({hover:true})
};
let onOut = () =>{
  this.setState({hover:false})
};
    return (
      <div className="App">
    <a onMouseOver={onHover} onMouseOut={onOut} style={this.state.hover? {color:'red', fontSize:'50px', cursor:'pointer'}: {color:'blue', fontSize:'50px', cursor:'pointer'}}>CHANGE LANGUAGE</a>
    <br/>
        <a onMouseOver={onHover} onMouseOut={onOut} style={this.state.hover? {color:'orange', fontSize:'50px', cursor:'pointer'}: {color:'blue', fontSize:'50px', cursor:'pointer'}}>DO SOMETHING ELSE</a>
        <br/>
                <a onMouseOver={onHover} onMouseOut={onOut} style={this.state.hover? {color:'grey', fontSize:'50px', cursor:'pointer'}: {color:'blue', fontSize:'50px', cursor:'pointer'}}>AND ELSE</a>
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 23 января 2019

Вместо отслеживания hover в качестве логического значения, вы можете отслеживать уникальный идентификатор для элемента hovered, а затем устанавливать для state.hover этот идентификатор при наведении курсора мыши и очищать его при наведении мыши. 

let onHover = (id) =>{
  this.setState({hover: id})
};
let onOut = () =>{
  this.setState({hover: null})
};

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

<a onMouseOver={() => onHover('CHANGE LANGUAGE'} onMouseOut={onOut} style={this.state.hover === 'CHANGE LANGUAGE' ? {color:'red', fontSize:'50px', cursor:'pointer'}: {color:'blue', fontSize:'50px', cursor:'pointer'}}>CHANGE LANGUAGE</a>
...