SharePoint Framework (SPFx) 客户端中动态更新值的问题

嘿，我明白你的问题了——控制台里的布尔值明明跟着按钮点击切换了，但前端WebPart上的内容却一直停留在默认的true，完全没变化对吧？这问题其实是因为你用了全局变量testBool，SPFx的WebPart可不会自动盯着全局变量的变化去更新UI哦！下面给你两种解决思路，看哪种更适合你的场景：

方案一：在传统SPFx WebPart中手动触发重渲染 #

如果你暂时不想换框架，就在现有代码基础上调整，核心是把变量放到WebPart类内部管理，并且在变量变化后手动触发重渲染：

1. 把全局变量移到类内部：将testBool定义为WebPart类的实例属性，这样我们可以通过this访问并控制它；
2. 把点击逻辑改成类方法：避免全局函数，直接在类里写点击事件处理方法，修改变量后调用this.render()强制WebPart重新渲染；
3. 在render里动态渲染值：根据this.testBool的最新值生成DOM内容，并给按钮绑定点击事件。

修改后的完整代码示例：

import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-webpart-base';

import styles from './LoginWireTestWebPart.module.scss';
import * as strings from 'GetlistofalllistsWebPartStrings';

export interface ILoginWireTestWebPartProps {
}

export default class LoginWireTestWebPart extends BaseClientSideWebPart<ILoginWireTestWebPartProps> {
  // 将变量移到类内部，作为实例属性
  private testBool: boolean = true;

  // 点击事件处理方法，放到类中
  private handleButtonClick = (): void => {
    console.log("before -->", this.testBool);
    this.testBool = !this.testBool;
    console.log("after -->", this.testBool);
    // 关键步骤：修改变量后调用render()，强制WebPart重新渲染UI
    this.render();
  }

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${styles.loginWireTest}">
        <p>当前布尔值：${this.testBool.toString()}</p>
        <button>切换布尔值</button>
      </div>
    `;
    // 用addEventListener绑定事件，比字符串绑定更可靠
    const toggleBtn = this.domElement.querySelector('button');
    if (toggleBtn) {
      toggleBtn.addEventListener('click', this.handleButtonClick);
    }
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

这样修改后，每次点击按钮改变testBool的值，都会触发this.render()，WebPart就会重新渲染，前端自然就显示最新的布尔值了。

方案二：改用React模板的SPFx WebPart（更推荐） #

如果你的WebPart后续需要做更复杂的交互或状态管理，建议直接用React模板的SPFx项目——React的状态管理机制会自动帮你处理UI更新，不用手动调用渲染方法，省心很多：

1. 创建WebPart时选择React模板（或者把现有代码重构为React组件）；
2. 用React的useState钩子来管理testBool的状态；
3. 点击按钮时调用状态更新函数，React会自动检测状态变化并重新渲染组件。

示例React组件代码：

import { useState } from 'react';
import styles from './LoginWireTest.module.scss';

export const LoginWireTest = () => {
  // 使用useState创建状态变量和更新函数，初始值为true
  const [testBool, setTestBool] = useState<boolean>(true);

  const handleButtonClick = () => {
    console.log("before -->", testBool);
    // 调用状态更新函数切换值
    setTestBool(prev => !prev);
    console.log("after -->", !testBool);
  };

  return (
    <div className={styles.loginWireTest}>
      <p>当前布尔值：{testBool.toString()}</p>
      <button onClick={handleButtonClick}>切换布尔值</button>
    </div>
  );
};

这里的核心是useState，当你调用setTestBool更新状态时，React会自动触发组件重渲染，前端的布尔值就会跟着实时更新了。

总结一下，你之前的问题就是因为没有触发WebPart的重新渲染，要么手动调用this.render()，要么用React的状态管理让框架自动处理，两种方式都能解决你的问题~

备注：内容来源于stack exchange，提问作者Shae Montague