时间戳

首页 > 解决方案 > 如何仅使一个元素更改 onHover (ReactJS)

javascript - 如何仅使一个元素更改 onHover (ReactJS)

问题描述

所以我试图通过改变状态来改变元素颜色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>
    );
  }
}

标签： javascriptreactjshoveronmouseover

解决方案

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

推荐阅读