编辑 DOM 个使用 React 构建的网页

Editing DOM of a Web Page Built with React

我正在尝试更改 ShipStation 的“订单”页面上文本区域的值。该页面是使用 React 构建的,我可以看到,当我在文本区域中键入内容时,该元素会在每次击键后重新呈现。

文本区域旁边有一个保存按钮(复选标记):

我正在尝试使用脚本来:

  1. 打开文本区域(通过在元素上调用 .click() 完成)。
  2. 更改文本区域值(应与 textarea.value = 'some value' 一起使用)。
  3. 单击文本区域旁边的保存按钮(再次使用 .click())。

以上所有操作都发生了,我的值出现在文本区域中,但是该值没有保存到服务器。事实上,在使用 textarea.value 保存一个值后,如果我将鼠标悬停在文本区域上,我在那里的文本就会消失。

所以我不太确定这里发生了什么,或者它是否可行。但是有些东西导致我的 textarea 值消失,我认为这与 React 将击键保存到它的道具有关,但由于我没有使用击键(直接使用 Javascript 来操作),它没有保存我对道具的价值,所以当它重新渲染时没有什么新东西,仍然只是一个空白值?

听起来对吗?我是不是遗漏了什么,有解决办法吗?

由于没有代码,我假设反应组件处理您正在编辑的文本区域在其状态下的值并呈现该状态下的值。您可以操作 dom 来更改值,但由于您尚未更改状态中的值,因此 React 将在下一次渲染中渲染状态中的值。如果您能够编辑 React 组件代码,您可以在 window 对象上添加一个事件监听器来监听可以在 React 之外触发的事件,并更新事件监听器中的状态。然后你可以通过在 window 上发布事件来触发侦听器从 react.