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

Question

我未能将类应用到 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}) 为假？

Answer 1

你很接近......你想要的是分配一个“事件索引”之类的东西。您的 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>
    );
}

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

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

(如您所见，我的鼠标不再悬停在事件项目上，但它仍然是黄色的)