react里怎么区分事件

Question

下面代码是两个map便利嵌套，每个遍历里分别绑了两个事件，但是现在两个事件会相互影响，该如何去把它们区别开来，各自执行自己的方法：

{
              this.props.list.map((item, index) => {
                return (
                  <div key={index} className="left">
                    
                    <div className="listWrap clearfix">
                      {
                        index === 0?
                        item.listArr.map((item, index) => {
                          return (
                            <div key={index} className="list">
                              <a href={item.link} target="_blank">
                                <div className="imgWrap"  onMouseEnter={this.hoverFuc.bind(this,index)}>
                                  <div className="cover">
                                    <div className="play" style={{display:this.state.index===index?'block':'none'}}><img className="icon" src="https://img.alicdn.com/tfs/TB16igMkwDD8KJjy0FdXXcjvXXa-64-64.png" /></div>
                                    <img src={item.imgLink} />
                                  </div>
                                </div>
                                <div className="listTitle">{item.listTitle}</div>
                              </a>
                            </div>
                          );
                        })
                        :
                        item.listArr.map((item, index) => {
                          return (
                            <div key={index} className="list 11">
                            
                              <a href={item.link} target="_blank">
                                <div className="imgWrap" data-index={index+'t'} onMouseOver={this.hoverFuc2.bind(this,index)}>
                                  <div className="cover">
                                    <div className="play" style={{display:this.state.index2===index?'block':'none'}}><img className="icon" src="https://img.alicdn.com/tfs/TB16igMkwDD8KJjy0FdXXcjvXXa-64-64.png" /></div>
                                    <img src={item.imgLink} />
                                  </div>
                                </div>
                                <div className="listTitle">{item.listTitle}</div>
                              </a>
                            </div>
                          );
                        })
                      }

                    </div>
                  </div>
                );
              })
            }

下面分别是hoverFuc和hoverFuc2 ，两个方法都会执行就是互相影响：

hoverFuc(index){
     this.setState({
      index:index
     })
  }

  hoverFuc2(index){
    console.log('oo');
    this.setState({
     index2:index
    })
 }

Answer 1

肯定都会执行啊，你hoverFuc是index为0的时候绑定的吧，hoverFuc2是index为其他值绑定的，但是每次执行肯定也只是hover某个元素的时候执行