Question

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

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

但是我坚持做了30分钟的反应。我试过了，但课程不会留下来。

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

Answer 2

如果您无法控制项目数量，那么您可以尝试以下方法。

onMouseEnter(event){
    event.target.style.backgroundColor = 'yellow';
}

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

以下是工作小提琴的链接：JSFiddle

hover in react将永久类添加到DOM节点

2 个答案: