javascript - 将react类应用于onMouseEnter的单个元素

我无法将类应用于Dom节点，下面的代码会将类应用于每个DOM节点。

import { Component } from 'react';

export default class App extends Component {
    constructor(props){
        super(props)

        this.state = {
            active: false
        }
    }

    onMouseEnter(){
        this.setState({active:true})
    }

    render(){
        const items = [1,2,3,4,5];
        return (
            <div>
                {items.map((obj,i) => <div key={i} className={this.state.active ? 'active' : ''} onMouseEnter={this.onMouseEnter.bind(this)}>{obj}</div>)}
            </div>
        );
    }
}

这里出了什么问题？另外，onMouseLeave怎么办？只需将this.setState({active:false})设置为false？

最佳答案

您近在咫尺...您想要的就像是分配“活动索引”。您的onMouseEnter()函数可以更改为采用这样的活动项的索引

onMouseEnter(index){
  this.setState({active: index})
}

而您的渲染函数将看起来像这样：

render(){
    const items = [1,2,3,4,5];
    return (
        <div>
            {items.map((obj,i) =>
            <div key={i} className={this.state.active === i ? 'active' : ''} onMouseEnter={this.onMouseEnter.bind(this, i)}>{obj}</div>)}
        </div>
    );
}

您在发布的示例中做错的事情不是区分列表中的哪个项目实际上是活动的，而是将活动类应用于每个项目。

您对我对这个问题的回答的评论毫无意义：

（如您所见，我的鼠标不再悬停在活动项目上，但仍然是黄色的）

关于javascript - 将react类应用于onMouseEnter的单个元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42756464/