如何仅使一个元素更改 onHover (ReactJS)答案

【问题标题】：How to make only one element to change onHover (ReactJS)如何仅使一个元素更改 onHover (ReactJS)
【发布时间】：2019-01-22 22:35:33
【问题描述】：

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

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

【问题讨论】：

简单的答案是改用 CSS。 React 的答案是为每个元素使用单独的状态变量。

标签： javascript reactjs hover onmouseover

【解决方案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>

【讨论】：