javascript - 编辑使用 React 构建的网页的 DOM

Question

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

文本区域（复选标记）旁边有一个保存按钮：

我正在尝试使用脚本来：

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

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

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

听起来对吗？我错过了什么吗，有没有办法解决这个问题？

标签： javascripthtmlreactjstextarea

Answer 1

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