Reactで出力したフォーム系タグのイベント属性に設定した関数を別の関数内で発火させる

注意
今回の記事で用いる手法はReact-domのバージョンが16.11までのもので確認できたものです。
それ以降のバージョンでは動作しない可能性があります。ご了承ください。

Reactのrender部分でフォーム系タグへイベント属性を記載している場合、実際に画面に出力された際のフォーム系タグの中にはイベント属性が記述されていません。

render部分の記述

<select id="id_aa" className="class_aa" onChange={(e)=>this.changeHandler(e)}>
    <option label="bb" value="1">bb</option>
    <option label="cc" value="2">cc</option>
</select>

出力された際の記述

<select id="id_aa" class="class_aa">
    <option label="bb" value="1">bb</option>
    <option label="cc" value="2">cc</option>
</select>

そのため、render部分の記述でonChange属性に指定した関数を、別の関数内で.onchangeを用いて発火させようとしても、出力された記述ではonChange属性が入っていないためか発火しませんでした。

ではどうやって発火させるかというと、以下の記述を用います。

const element = document.querySelector("指定したいid名やclass名");
const event = new Event('input', { bubbles: true});
event.simulated = true;
element.value = "設定したいvalue";
element.defaultValue = "設定したいvalue";
element.dispatchEvent(event);

イベントオブジェクトにsimulatedという特殊なプロパティがあり、それをtrueにすることで可能になる。
また、イベントオブジェクトのbubbles: trueも必須。

最初に記載した、render部分の記述コードのonChange属性に指定した関数を別関数で発火させる記述例としては以下となります。
イメージとしては、別に設置したボタンをクリックした際、ボタン独自の挙動と一緒にセレクトボックスの選択内容を変更させ、変更した際のイベントを発火させる感じです。

render部分の記述

<select id="id_aa" className="class_aa" onChange={(e)=>this.changeHandler(e)}>
    <option label="bb" value="1">bb</option>
    <option label="cc" value="2">cc</option>
</select>
<button onClick={(e) => this.otherButtonHandler(e)}>セレクトボックスの選択をccにする</button>

buttonタグのonClickに設定した関数

otherButtonHandler(e) {
    const element = document.querySelector("id_aa");
    const event = new Event('input', { bubbles: true});
    event.simulated = true;
    element.value = "2";
    element.defaultValue = "2";
    element.dispatchEvent(event);

    //以後、ボタン独自の挙動
    ～～～
}

自分が見つけた方法としては以上となりますが、もし他に良い方法があったりすれば教えていただけると助かります。