
簡潔な答え:
function setNativeValue(element, value) {
let lastValue = element.value;
element.value = value;
let event = new Event("input", { target: element, bubbles: true });
// React 15
event.simulated = true;
// React 16
let tracker = element._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
element.dispatchEvent(event);
}
var input = document.getElementById("ID OF ELEMENT");
setNativeValue(input, "VALUE YOU WANT TO SET");
参考: https://stackoverflow.com/a/52486921/17360
詳細な答え:
ReactはネイティブJavaScriptのonChange動作をオーバーライドします。onChangeイベントをトリガーしても、Reactの観点では入力フィールドの値を変更することはできません。Reactにとって値は依然として変更されていないのです。ユーザーには画面上で値が明確に見えているにも関わらずです。上記のコードはReactでも変更をトリガーします。
著者:Chuck Conwayはソフトウェアエンジニアリングと生成AIを専門としています。ソーシャルメディアで彼とつながりましょう:X (@chuckconway) または YouTube をご覧ください。