如何用JavaScript为React生成的无value属性的div设置文本？

你遇到的问题是这类div是框架实现的受控模拟输入组件，它的文本状态存在框架内部state里，直接用.value赋值无效（因为它不是原生input/textarea，没有value属性），需要通过修改DOM文本并触发框架监听的事件，或者模拟用户输入来同步状态。

针对你给出的Twitter推文输入框场景，提供两种可行方案：

方案一：修改内部文本节点并触发同步事件 #

直接找到承载文本的span元素修改内容，再触发input事件让React更新状态：

// 定位推文输入div
const tweetInput = document.querySelector('div[aria-label="Tweet text"]');
// 找到内部存储文本的span
const textElement = tweetInput.querySelector('span[data-text="true"]');
// 设置新文本
textElement.textContent = "Hello everyone, this is my second tweet.";
// 触发input事件，通知React更新状态
tweetInput.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));

方案二：模拟真实用户粘贴操作（更安全，不易被反爬检测） #

通过聚焦、清空、粘贴的流程模拟用户操作，同时触发事件同步状态：

const tweetInput = document.querySelector('div[aria-label="Tweet text"]');
// 聚焦输入框
tweetInput.focus();
// 选中并清空现有内容
document.execCommand('selectAll');
document.execCommand('delete');
// 写入剪贴板并粘贴
navigator.clipboard.writeText("Hello everyone, this is my second tweet.").then(() => {
  document.execCommand('paste');
  // 触发事件同步状态
  tweetInput.dispatchEvent(new Event('input', { bubbles: true }));
});

关键原理说明 #

React/Vue的受控组件会将输入状态维护在自身的state中，仅监听特定事件（如input、change）来更新状态。直接修改DOM文本不会触发这些事件，所以框架无法感知到内容变化，导致后续操作（如发布推文）无法识别新内容。必须通过触发对应的事件，让框架同步DOM变化到内部state，才能让修改生效。

内容的提问来源于stack exchange，提问作者丶 Limeー来夢 丶