Skip to content

投稿

バニラJavaScriptからReactの入力値を変更する

2020年7月27日 • 1分で読める

バニラJavaScriptからReactの入力値を変更する

簡潔な答え:

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 をご覧ください。

↑ トップに戻る

こちらもおすすめ