使用 JavaScript 更改 React 页面内容答案

【问题标题】：Using JavaScript to change a React Page Content使用 JavaScript 更改 React 页面内容
【发布时间】：2020-12-30 06:53:39
【问题描述】：

所以，我有一个使用 Swagger 作为其文档的 API，swagger 生成一个 ReactJs 网页来记录和测试 API 端点。我对 React 架构几乎一无所知，所以我不知道是什么导致了这个问题：

在使用任何端点之前，您必须请求一个身份验证令牌，使用另一个端点向另一个 API 执行 POST 请求，返回承载令牌。

每次我出于测试目的启动 API 时，我都会通过将 json 放入 textarea 中“手动”发出授权请求：然后我必须在响应中抓取令牌，打开授权模式，并将令牌粘贴到输入中：

我这样做了很多次。所以我决定在 JS 中创建一个小脚本，以便在我启动 API 调试时完成这个过程。这意味着脚本会更改招摇页面上的 textarea/input 值。当值改变时，你可以在 UI 上看到它，但是一旦脚本模拟了另一个动作，比如提交请求，改变的值就会返回到旧的/默认值。

看起来它需要用户交互来更新页面状态？？我不太明白，我在更改值后也尝试过，触发我知道的每个更改/更新 js 事件，但也没有用。

编辑：我在做什么的例子：

我已经按照 Ray Hatfield 的建议安装了 React Developer Tools，看起来输入确实是一个 React 组件

我在更改值后尝试更新状态：

还是不行

【问题讨论】：

【解决方案1】：

这更像是一个评论而不是一个答案，但是……

您的脚本是否通过直接 DOM 操作来更改 textarea 值？例如document.querySelector('textarea').value = json?如果是这样，React 很可能看不到它，因为数据/状态通常向下流入 DOM，而不是从 DOM 向上流动。

我的猜测是有一个 React 组件可以渲染文本区域并在其上注册一个更改侦听器。来自 textarea 的更改事件会触发组件中的状态更新，这会重新渲染 textarea 以反映更新后的状态。

您表示您已经触发了更改事件，在上述情况下它似乎应该可以工作。更新是通过按键或按键触发的，但可能性较小。

我建议您在浏览器中安装React devtools 并使用“组件”视图来检查 textarea 组件。它可以让您深入了解组件的状态、它正在侦听的事件等，并且可以让您看到运行脚本时发生的变化（如果有的话）。

它还包括一个按钮，用于打开所选组件的源代码。（在没有源地图的最小化应用程序中，它可能难以理解，但值得一看。）

【讨论】：

【解决方案2】：

好了，终于明白了，为了解决 React 组件不重新渲染，我不得不使用 Javascript 的 PropertyDescriptor 来获取输入元素的原生值设置器：

var ValueSetter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype,
    "value"
).set;

然后我调用 ValueSetter 方法传递输入元素的节点，它是新值：

ValueSetter.call(authInput, token);

现在只需触发“输入”事件，出于某种原因，我需要将事件的冒泡设置为 True，因此事件会在祖先元素上分派（可能会监听一些包装器/主元素触发器和它的孩子只是冒泡事件，所以它可以得到它，idk...）：

var inputEvent = new Event("input", { bubbles: true });
authInput.dispatchEvent(inputEvent);

【讨论】：