React.jsで構築されたサイトをBookmarkletで操作する

序

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()
}

参考にしたサイト