[解決編] 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もそうあるべきという強い思い込みがあったので盲目になっていたかなと思います。最近になって自分が盲目モードに陥りやすいというのを自覚するようになったので、今後は適度に人に頼る、相談するという行動を心がけていきます。