javascript - 调用 javascript 修改 React 表单上的选择元素

Question

我正在尝试更改已使用 React 编码的网页上 select 元素的值。

<select id="pickMenu" data-reactid=".6.0.3.4">
  <option value="1" selected data-reactid=".6.0.3.4.1.1">XS</option>
  <option value="2" data-reactid=".6.0.3.4.1.2">S</option>
  <option value="3" data-reactid=".6.0.3.4.1.3">M</option>
  <option value="4" data-reactid=".6.0.3.4.1.4">L</option>
  <option value="5" data-reactid=".6.0.3.4.1.5">XL</option>
</select>

我遇到的麻烦是，当我尝试调用一些 javascript 来选择另一个选项时，修改似乎明显发生在浏览器中，但当我发布表单时，React 会忽略该修改.

document.getElementById('pickMenu').value = 4;

我尝试手动触发click、input和mouseup事件，但最终没有一个到达React。

那么我怎样才能让 React 意识到我的修改呢？

我还应该补充一点，我正在使用 browser.Document.InvokeScript(...)，因为我通过 WebBrowser 控件抓取网站，但如果我使用 IE 控制台，问题是相同的.

Answer 1

React 不会读取 HTML 内容来找出表单事件值之类的内容，因此更改 DOM 表示形式不起作用。最好的选择是使用 happen 模拟一个实际更改表单的事件，就像用户所做的那样。或createEvent API。