如何在控制台中显示鼠标悬停元素的text字段内容

问题出在你的hoverHandler直接打印了整个state列表，没有获取当前悬停元素的具体数据。你需要把当前列表项的text传递给事件处理函数，有几种实现方式：

方式一：直接传递当前项的text值 #

修改事件绑定，在onMouseEnter中通过箭头函数把当前item的text传给hoverHandler，同时更新handler接收参数：

export default class List extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: [
        {
          id: 1,
          text: "Text1",
        },
        {
          id: 2,
          text: "Text2",
        },
        {
          id: 3,
          text: "Text3",
        },
      ],
    };

    this.hoverHandler = this.hoverHandler.bind(this);
  }

  hoverHandler(text) {
    // 打印当前悬停元素的text
    console.log(text);
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item) => (
            <li
              key={item.id}
              // 绑定事件时传递当前item的text
              onMouseEnter={() => this.hoverHandler(item.text)}
            >
              {item.text}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

方式二：传递整个item对象 #

如果之后需要用到item的其他属性，可以直接传递整个item，再在handler中取text：

// 修改hoverHandler
hoverHandler(item) {
  console.log(item.text);
}

// 绑定事件时传递item
onMouseEnter={() => this.hoverHandler(item)}

方式三：通过事件对象获取DOM文本 #

不需要额外传参，直接从事件对象的目标元素中提取文本内容：

// 修改hoverHandler
hoverHandler(e) {
  console.log(e.target.textContent);
}

// 绑定事件时无需传参
onMouseEnter={this.hoverHandler}

这三种方式都能实现你要的效果，根据实际需求选择即可。

内容的提问来源于stack exchange，提问作者intern