调用 javascript 修改 React 表单上的 select 元素

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 到 select 另一个选项时，修改似乎明显发生在浏览器中，但当我 post 表单时被 React 忽略。

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

我尝试手动触发 click、input 和 mouseup 事件，但是 none 他们最终达到了 React。

那么我怎样才能让 React 知道我的修改？

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

Answer 1

React 不会读取 HTML 内容来找出诸如表单活动值之类的东西，因此更改 DOM 表示将不起作用。您最好的选择是使用 happen or the createEvent API.

模拟一个实际改变用户行为方式的事件

调用 javascript 修改 React 表单上的 select 元素

Invoking javascript to modify a select element on a React form

javascript

jquery

webbrowser-control

web-scraping

reactjs