Question

如何才能仅更改鼠标悬停的元素而不更改ID？以下是我的代码组件，该组件在鼠标悬停时从数组中随机更改文本颜色。

class Chroma extends React.Component {
constructor(props) {
super(props)
}
mouse = event => {
var colorhex = [
'#7AF377', '#3498DB', '#F1C530', '#F29C29', '#8E44AD', '#4AA086', '#E74C3C', '#65CC71','#D3541B','#EB4367','#74F7D9', '#DDA8FC',
]
var el = document.getElementById('colorstext')
el.style.color = colorhex[Math.floor(Math.random() * 12)]
}
mouseout = event => {
var white = '#FFFFFF'
var el = document.getElementById('colorstext')
el.style.color = white
}

render() {
return (

<a
href={this.props.link}
onMouseEnter={this.mouse}
onMouseLeave={this.mouseout}
id="colorstext"
>
{this.props.text}
</a>
)
}
}
export default Chroma

Answer 1

尝试使用事件对象中的以下信息：

const mouse = event => {
   const el = event.target // instead of getElementById('colorstext')
   .... your code
 }

Answer 2

event.target是完成此操作的最简单方法。

但是我注意到您没有绑定鼠标动作，您需要像这样绑定mouse和mouseout： onMouseEnter={(event) => mouse(event)}

这是工作示例： https://codesandbox.io/s/n5jvrkxxwp

鼠标悬停时更改嵌入式颜色（反应）

2 个答案: