如何让只有一个元素改变 onHover (ReactJS)

Question

所以我试图通过改变状态来改变悬停时的元素颜色，问题是所有元素都改变了，因为状态。如何做到只有一个元素会改变？

link 问题： 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>
    );
  }
}

Answer 1

您可以跟踪悬停元素的唯一标识符，然后在鼠标悬停时将 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>

如何让只有一个元素改变 onHover (ReactJS)

How to make only one element to change onHover (ReactJS)

javascript

onmouseover

hover

reactjs