React中点击按钮修改文本字体样式时跳转空白页问题求助

一、页面跳转的根因与解决 #

点击按钮跳空白页，大概率是触发了浏览器默认的表单提交或链接跳转行为：

• 如果按钮在<form>标签内：浏览器默认将按钮识别为提交按钮（type="submit"），点击后会提交表单并刷新页面。解决方法：要么给按钮添加type="button"属性，要么在点击事件函数中加入e.preventDefault()阻止默认行为。
• 如果用<a>标签替代按钮：未设置href="#"或未阻止默认行为时，点击会跳转至空链接。建议换成<button>标签，或者在事件函数中加入e.preventDefault()。

二、修复样式修改的代码（React正确写法） #

你当前的DOM操作代码存在两处硬伤，且不符合React状态驱动的设计逻辑：

1. document.getElementsByClassName('.form-control')多了前缀.，类名参数不需要加.；且该方法返回的是元素集合，不是单个元素，直接修改style会报错。
2. 将DOM元素传给setText完全错误，React状态应存储数据或状态标识，而非DOM节点。

推荐写法：用状态控制样式 #

import { useState } from 'react';

function YourComponent() {
  // 用状态标识是否启用斜体样式
  const [isItalic, setIsItalic] = useState(false);

  const toggleItalic = () => {
    // 切换状态
    setIsItalic(!isItalic);
  };

  return (
    <div>
      {/* 方式1：用className绑定状态（推荐，便于样式维护） */}
      <p className={`form-control ${isItalic ? 'text-italic' : ''}`}>目标文本</p>
      {/* 方式2：内联style绑定 */}
      {/* <p className="form-control" style={{ fontStyle: isItalic ? 'italic' : 'normal' }}>目标文本</p> */}
      {/* 按钮添加点击事件，若在form内需加type="button" */}
      <button type="button" onClick={toggleItalic}>切换斜体</button>
    </div>
  );
}

// 对应CSS（若使用方式1）
// .text-italic { font-style: italic; }

非推荐：修正后的DOM操作写法 #

如果坚持直接操作DOM，至少要修正错误并阻止默认行为：

const textBold = (e) => {
  // 先阻止默认跳转行为
  e.preventDefault();
  // 去掉类名前的.，取第一个匹配的元素
  const targetText = document.getElementsByClassName('form-control')[0];
  // 判断元素存在后再修改样式，避免报错
  if (targetText) {
    targetText.style.fontStyle = "italic";
  }
  // 此处无需调用setText，除非你的状态用于存储文本内容而非DOM元素
};

核心要点 #

• 页面跳转问题的本质是未阻止浏览器默认行为，解决成本极低。
• React开发应优先采用状态驱动UI，直接操作DOM会破坏虚拟DOM机制，导致代码难以维护和调试。

内容的提问来源于stack exchange，提问作者Muhammad Ameer Ali Khan