【React】ボタンクリックで別のDOM要素のイベントを起動する方法

はじめに

ボタンクリックで別のDOM要素のイベントを起動する方法についてです。

Material Uiの<Button />など、あらかじめカスタムされたコンポーネントだと別のDOM要素を紐付けるカスタムは面倒です。
ここではuseRef()を使用し、onClickでDOMの参照に対する操作を行うことで解決します。

※通常は<Form />要素を使用することで複雑な実装なく動作します。

シチュエーション

ボタン（<Button />）と、透明な入力ボックス（<input />）がある
<input type="file" />を使用したファイルアップロードをボタンから行えるようにしたい。

やりたいこと

ボタンをクリックしたら、入力ボックスがクリックされた挙動をさせたい

関数コンポーネント

<Button
  onClick={handleClick}
>

<input
  type="file"
  style={{display: 'none'}}
/>

方法

• React.useRef()を使って、入力ボックス（<input />）の参照を得る
• onClickしたら、関数内で参照をクリックさせる

関数コンポーネント

const inputRef = React.useRef();

const handleClick = () => inputRef.current.click();

// .....

<Button
  onClick={handleClick}
>

<input
  type="file"
  ref={inputRef}
  style={{display: 'none'}}
/>

まとめ

• React.useRef()を使うことで、操作したいDOMへの参照を得る
• onClick内で参照に対する操作を行う

こうすることで、あるボタンから別のDOM要素のイベントを起動できる。