Question

我有问题。它是：

let list = storage.map((element, index, array) => {
  return (
    <li key={index} className="list-element">
      <div className="title-wrapper" onMouseEnter={this.handleMouseEnter}>
        <p className="title">{array[index]['title']}</p>
        <p className="title title-full" ref={node => this.title = node}>Text</p>
      </div>
    </li>
      );
}); 
handleMouseEnter() {
    this.title.style.opacity = "1";
}

因此，当鼠标进入.title-wrapper时，我想在.title-full上将不透明度设置为1。但无论哪个.title-wrapper鼠标进入，总是将不透明度设置为最后一个.title-full。使用querySelector很容易解决这个问题，但我读到在React中使用它是件坏事，不是吗？

Answer 1

this.title始终设置为最后一个元素的原因是因为您将循环中的每个元素设置为this.title，因此最后一个元素将覆盖它之前的元素，依此类推。

如何直接使用CSS，而不是在React中处理它？例如：

.title-wrapper:hover .title-full {
  opacity: 1;
}

Answer 2

只是一般性评论，在React中通常不首选refs（有时可能是表格或模态）。你正在模仿的是一种类似jQuery的DOM操作方法，它当然可以工作，但是回避了React基于状态，明显且易于理解的能力。

我通常会

this.setState({
   hovered: true
})

在handleMouseEnter方法中（并在mouseOut中取消设置）。然后根据this.state.hovered

选择您的className

Answer 3

我认为使用CSS肯定是最好的方法。

对于在另一个上下文中遇到多个引用的问题的任何人，您可以通过将引用存储在数组中来解决问题

let list = storage.map((element, index, array) => {
  return (
    <li key={index} className="list-element">
      <div className="title-wrapper" onMouseEnter={() => this.handleMouseEnter(index)}>
        <p className="title">{array[index]['title']}</p>
        <p className="title title-full" ref={node => this.titles[index] = node}>Text</p>
      </div>
    </li>
  );
}); 

handleMouseEnter(index) {
  this.titles[index].style.opacity = "1";
}

同样，您不需要为您的用例执行此操作，只是认为它可能对其他人有用：D

具有相同ref的多个元素，React

3 个答案: