时间戳

首页 > 解决方案 > 如何使用 Jquery 更新反应应用程序中的 textarea 值

javascript - 如何使用 Jquery 更新反应应用程序中的 textarea 值

问题描述

我正在构建一个覆盖 3rd 方反应网站的 Chrome 扩展。我正在尝试使用以下代码更新该应用程序中 textarea 的值：

$('textarea').val("Text to go in textarea.");

代码成功更新了 textarea 但是一旦用户单击 textarea，DOM 似乎重新生成并且值变为空白。

更新 textarea 中的值以使其即使在用户单击并重新生成 DOM 后仍保持不变的最佳方法是什么？我不是反应专家，但我的猜测是 textarea 与状态相关。有没有办法在我的 chrome 扩展中从我自己的 jquery 更新它？

为了清楚起见，textarea 属于我无法控制的第 3 方网站/react 应用程序。我正在尝试从我自己的 google chrome 扩展程序中操作它。我认为最简单的方法是以某种方式模拟实际输入，以使 React 应用程序认为用户输入了我的输入，但是我四处搜索却找不到这样做的方法。

标签： javascriptjqueryreactjs

解决方案

扩展@Panther 的建议，您可以像上面那样设置值，然后触发 onChange 或 keypress 事件等以保存状态或道具的更改。现在由于 React 使用合成事件，您需要触发 then ，如图所示。

$('textarea').val("Text to go in textarea.");

$.each(document.getElementsByTagName("textarea"),(index,Element)=>{
    let event = new Event("change"); // repeat for keypressup,down,input etc.
    Element.dispatchEvent(event);
});

推荐阅读