javascript - 将鼠标悬停在 React 中，将永久类添加到 DOM 节点

Question

https://fiddle.jshell.net/q8b3vwv8/

这是jquery的例子，我在15秒内写完了。

但我在 react 中卡住了 30 分钟。我已经尝试过，但类(class)不会留下来。

https://fiddle.jshell.net/8wsr7xa1

constructor(props){
        super(props)

        this.state = {
            active: null
        }
    }

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

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

真的需要帮助!

Answer 1

问题是您尝试为多个项目设置一种状态，但同时只有一个项目处于事件状态。您需要以某种方式跟踪状态更改，我制作了简单的解决方案来为每个项目提供单独的状态。

this.state = {
  active: null,
  activeItems: [false,false,false,false,false]
}

然后在 mouseEnter 上我设置状态:

onMouseEnter(item){
  this.state.activeItems[item-1]=true;
  this.setState({activeItems: this.state.activeItems});
}

最后根据状态设置颜色:

style={this.state.activeItems[i] ? 
                {backgroundColor: 'yellow'} : {}} 
                onMouseEnter={this.onMouseEnter.bind(this, obj)}>

fiddle 在这里:fiddle