[解決編] MUI5でcurrentTargetが取得できない問題


こんにちわ!本日は前回の記事でご紹介した問題の解決方法が判明したのでご紹介します。

前回のおさらい

MUI5のドロップダウンは値が変更された際に発火元の要素を返してくれないので複数のドロップダウンがあるときに制御ができないという問題があります。詳しくは前回の記事をご覧ください。

発火元要素ではなく、name属性を掴む

結論を言ってしまうと、MUI5ではやはり発火元の要素(HTMLElement)を取ることはできないようです。その代わりにtargetのnameプロパティに発火元のname属性が取得できるので、実質的に「発火元の要素を特定する」という目的を達成できます。

すべてのドロップダウンにnameを前もって割り振る必要がありますが、コンポーネントの分割が適当にできていれば1か所にドロップダウンが大量に存在することもないでしょうし特に問題ではないかと思います。前回の記事でご紹介したようにテーブル内のセルがドロップダウンになっていて行数分だけ要素が存在する場合には、下記コードの様に配列を回してJSXを書いているでしょうからkeyかそれに準ずるものをname属性にあてがってやればOKです。

data.map(({ name }) => (
  <TableRow hover key={name}>
    <TableCell>{name}</TableCell>
    <TableCell>
      <Select
        name = {name}
        onChange={(e, child) => {
      const elementName = e.target.name // name属性を掴む
          // 処理
        }}
        fullWidth
        value={data.find((f) => f.name === name)?.bloodType}
      >
        <MenuItem value="A型">A型</MenuItem>
        <MenuItem value="B型">B型</MenuItem>
        <MenuItem value="O型">O型</MenuItem>
        <MenuItem value="AB型">AB型</MenuItem>
      </Select>
    </TableCell>
  </TableRow>))

今回の反省

前回の記事では良い策が見当たらずあきらめてしまったのですが、記事を見た会社の先輩から要素ではなく属性を掴んでみては?と具体的なアドバイスを頂いてようやく解決することが出来ました。解決できてよかった思う反面、なぜ自分の力で気づけなかったのかというのは悔しいところです。

反省すべき点としてはJSネイティブのeventは発火元要素を返すのでMUI5 Selectもそうあるべきという強い思い込みがあったので盲目になっていたかなと思います。最近になって自分が盲目モードに陥りやすいというのを自覚するようになったので、今後は適度に人に頼る、相談するという行動を心がけていきます。

まとめ

今回はMUI5 Selectで発生していた問題の解決方法のご紹介しました。自分では行き詰っても他人へ相談したら一瞬で解決したというのは開発業務に関わらずよくある話だと思います。頼ってばかりはダメですが、逆に頼りづらい状況にならないよう日頃の信頼関係構築が大事だなと改めて感じました。

この記事が面白かった方、参考になった方は、是非「イイね」お願いします。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA