使用JavaScript更改React页面内容

因此，我有一个使用Swagger进行文档编写的API，swagger生成了一个ReactJs网页来文档化和测试API端点。我对React架构一无所知，所以我不知道到底是什么导致了这个问题：

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

每次出于测试目的而启动API时，我都会通过将json放在文本区域中来“手动”发出授权请求：

然后，我必须在响应中获取令牌，打开授权模式，然后将令牌粘贴到输入中：

我做了很多次。因此，我决定在JS中创建一个小脚本，以便在启动API调试时对我进行此过程。这就意味着该脚本会更改招摇页面上的文本区域/输入值。更改值后，您可以在UI上看到它，但是一旦脚本模拟了另一项操作（例如提交请求），更改后的值将返回到旧/默认值。

好像需要用户交互才能更新页面状态？我不太了解，在更改值后我也尝试过，触发我知道的每一次change / update js事件，但均不起作用。

编辑：我正在做什么的示例：

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

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

但仍然不起作用

这不是评论，而是答案，但是……

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

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

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

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

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

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

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

然后我调用了ValueSetter方法，该方法传递输入元素的节点及其新值：

ValueSetter.call(authInput,token);

现在只触发“ Input”事件，由于某种原因，我需要将事件的冒泡设置为True，因此该事件将在祖先元素上分派（也许可以通过监听某些包装器/主元素触发器和只是孩子们冒泡了活动，所以它可以参加，idk ...）：

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