カテゴリーアーカイブ 言語

著者:村上

【React】Material-UIのListsコンポーネントのrightIconButtonについて

ちょっとハマったので、対応方法をまとめ。
今回は、React のプロジェクトでマテリアルデザインを導入するために利用している「Material-UI」というフレームワークについてです。
このフレームワークで用意されている Lists コンポーネントを使ってリストを作成しているのですが、リストアイテムの右端にアイコンボタンを設置したとき、ボタンを押すとリストアイテムまで反応してしまうという現象が発生していました。

バージョンが古いのも問題なのでしょうが…依存関係の問題もあり、まだアップデートができていません。
時間を見つけて行いたいと思います。

サンプルのコードはこちら。

const rightButton = (
    <IconButton onClick={this.clickButton}>
        <MoreVertIcon color={grey400} />
    </IconButton>
);

<ListItem
    onClick={this.listClick}
    primaryText={[タイトル]}
    secondaryText={[サブタイトル]}
    leftAvatar={<img src={[画像URL]} height="40" width="40" style={style.image} />}
    rightIconButton={rightButton}/>

上記のように、右端に表示したいアイコンボタンを rightIconButton を使って定義したのですが、このボタンをクリックすると、ListItem で指定した onClick も発火してしまいます。
ドキュメントによると、rightIconButton を使って定義したボタンをクリックした時は、ListItem のクリックイベントは発火しないと書かれているのですが…。

で、正直面倒くさくなってしまったため、力業で解決することにしました。
それが下記のコードです。

<div className="listItem">
    <ListItem
        onClick={this.listClick}
        primaryText={[タイトル]}
        secondaryText={[サブタイトル]}
        leftAvatar={<img src={[画像URL]} height="40" width="40" style={style.image} />}
        rightIconButton={rightButton}/>
    <IconButton onClick={this.clickButton} className="rightButton">
        <MoreVertIcon color={grey400} />
    </IconButton>
</div>

ListItem から IconButton を外に出してしまい、CSS で位置を調整しました。
なお、CSS は下記のとおりです。

.listItem {
    position: relative;
}
.rightButton {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

恐らく上記の CSS であれば、ListItem の高さが変わってもボタンの位置は上下中央揃えになるはずです。
なお、CSS はデザインに応じて適宜変更してください。

以上、Material-UI のLists コンポーネントの rightIconButton が思った通りの動作をしなかった時の対処法でした。
正式な方法ではありませんが、少なくとも私の環境では問題なく動作しておりますので、お急ぎの時はこの方法を検討してみてはいかがでしょうか。