将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}) 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>
    );
}

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

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

（你可以看到我的鼠标不再悬停在活动项目上但它仍然是黄色的）