Изменить встроенный цвет при наведении курсора мыши (React)

Question

Как я могу сделать это, чтобы изменить только элемент, на который наведен указатель мыши, а не по идентификаторам?Ниже приведен мой компонент кода, который меняет цвет текста случайным образом из массива при наведении курсора.

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

event.target - это самый простой способ сделать это.

Но я замечаю, что вы не связывали действия мыши, вам нужно связать mouse и mouseout следующим образом: onMouseEnter={(event) => mouse(event)}

Вот рабочий пример: https://codesandbox.io/s/n5jvrkxxwp

Answer 2

Попробуйте использовать следующую информацию в объекте события:

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