React中鼠标悬停带图片按钮时如何修改<p>标签文本？

我来帮你解决这个问题～你之前的思路是直接操作DOM修改按钮样式，但因为<p>标签不在按钮的作用域内，没法直接修改它的文本。React的核心思路是用**状态（state）**来统一管理动态变化的数据，让UI跟着状态自动更新，这样就能轻松实现跨元素的交互效果了。

下面是修改后的完整代码，我会一步步解释关键改动：

import React, { useState } from 'react';
import "./Tri.css";

function Tri() {
  // 定义两个状态：控制<p>标签的显示文本，以及标记当前悬停的按钮
  const [displayText, setDisplayText] = useState("Larry Or David?");
  const [hoveredBtn, setHoveredBtn] = useState(null);

  // David按钮悬停进入时更新状态
  const onDavidHover = () => {
    setDisplayText("David");
    setHoveredBtn("david");
  };

  // David按钮离开时恢复初始状态
  const onDavidLeave = () => {
    setDisplayText("Larry Or David?");
    setHoveredBtn(null);
  };

  // Larry按钮悬停进入时更新状态
  const onLarryHover = () => {
    setDisplayText("Larry");
    setHoveredBtn("larry");
  };

  // Larry按钮离开时恢复初始状态
  const onLarryLeave = () => {
    setDisplayText("Larry Or David?");
    setHoveredBtn(null);
  };

  return (
    <div>
      <div>
        <div>
          {/* 根据hoveredBtn状态动态设置按钮背景色 */}
          <button 
            onMouseOver={onDavidHover} 
            onMouseLeave={onDavidLeave}
            style={{ background: hoveredBtn === "david" ? "red" : "green" }}
          >
            <img src={require(`./images/david.png`)} className="david"/>
          </button>
          <button 
            onMouseOver={onLarryHover} 
            onMouseLeave={onLarryLeave}
            style={{ background: hoveredBtn === "larry" ? "red" : "green" }}
          >
            <img src={require(`./images/larry.png`)} className="larry"/>
          </button>
        </div>
        <div className="plex">
          {/* 把<p>标签的文本绑定到displayText状态，状态变文本自动更 */}
          <p>{displayText}</p>
        </div>
      </div>
    </div>
  );
}

export default Tri;

关键改动说明： #

1. 引入useState钩子：创建displayText和hoveredBtn两个状态变量，用来分别控制<p>的文本和按钮的背景色。状态更新时，React会自动重新渲染组件，同步更新对应的UI。
2. 替换DOM操作为状态更新：把之前直接修改按钮样式的代码改成更新状态，这样按钮样式和<p>文本都由状态驱动，符合React单向数据流的设计原则。
3. 状态与UI绑定：<p>标签直接使用{displayText}绑定状态，按钮通过条件判断hoveredBtn的值来设置背景色，状态变化时UI会自动同步。

如果你更习惯用CSS类来控制样式（而非内联样式），可以这样优化：

1. 在Tri.css中添加两个类：

.btn-hovered {
  background-color: red;
}
.btn-normal {
  background-color: green;
}

2. 修改按钮的className：

<button 
  onMouseOver={onDavidHover} 
  onMouseLeave={onDavidLeave}
  className={hoveredBtn === "david" ? "btn-hovered" : "btn-normal"}
>
  <img src={require(`./images/david.png`)} className="david"/>
</button>

这样样式和逻辑分离，代码会更易于维护～

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