序
React.jsで構築されたサイトをBookmarkletで操作するための何か
なに？
DOM操作でINPUTエレメントなどに値を入力/変更してもReact側には伝えられないためReactから無視されます。
これを無理やりReact側に伝えるためにごにょごにょする奴です。
方法
input[type="text"]
ごにょごにょした上でchangeイベントを強制発火します。
// React.jsのデータをイベントを発火することで無理やり書き換える
function setValueToInput(value, element) {
const lastValue = element.value;
element.value = value;
const event = new Event('change', { bubbles: true });
const tracker = element._valueTracker;
if(tracker) {
tracker.setValue(lastValue);
}
element.dispatchEvent(event);
}
selectとoption
selectedIndexを設定してchangeイベントを強制発火します。
// React.jsのデータを無理やり書き換えるの<SELECT>バージョン
function setIndexToSelect(index, element) {
element.selectedIndex = index;
const event = new Event('change', { bubbles: true });
element.dispatchEvent(event);
}
input[type="radio"]
クリックします。
// React.jsのデータを無理やり書き換えるのラジオボタンバージョン
function checkRadio(element) {
element.click()
}
input[type="checkbox"]
クリックします。
// React.jsのデータを無理やり書き換えるのチェックボックスバージョン
function toggleCheckbox(element) {
element.click()
}
参考にしたサイト