React.js:Material UIのList/Rightmenuのサンプルコード

記事公開日:
最終更新日:

Sponsored Links

React.jsで開発していて、Material UIを利用した場合の List と Rightmenu のサンプルコードをメモ代わりに書いています。
もっと良い書き方があるとは思いますが、とりあえず下記のコードで動きましたよって事で。

ちなみに下記のコードは、ES2015(ES6)を使って書いています。導入していない場合には過去記事 React.jsでES2015(ES6)のアロー関数(Arrow Function =>)を使えるようにする を参考にしてみてください。

import React from 'react';
import {deepOrange500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {List, ListItem} from 'material-ui/List';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
// Material UI Theme Settings
const styles = {
    container: {
        textAlign: 'center',
        paddingTop: 200,
    },
};
// Choose Theme Set
const muiTheme = getMuiTheme({
    palette: {
        accent1Color: deepOrange500,
    },
});
// Right Icom Menu
const iconButtonElement = (
  <IconButton
    touch={true}>
  </IconButton>
);
export class KeywordList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: "Sample"};
        this.handleEditData = this.handleEditData.bind(this);
        this.handleDeleteData = this.handleDeleteData.bind(this);
    }
    handleEditData = () => {
        alert("Edit");
    }
    handleDeleteData = () => {
        alert("Delete");
    }
    render() {
        const rightIconMenu = (
           <IconMenu iconButtonElement={iconButtonElement}>
           <MenuItem onClick={this.handleEditData}>Edit</MenuItem>
           <MenuItem onClick={this.handleDeleteData}>Delete</MenuItem>
           </IconMenu>
        );
        return (
          <MuiThemeProvider muiTheme={muiTheme}>
            <div>
              <List>
                   {this.state.value.map(function(d, i) {
                       return (
                         <ListItem
                           rightIconButton={rightIconMenu}
                           primaryText={d}
                         />);
                   })}
              </List>
            </div>
          </MuiThemeProvider>
        );
    }
}

About
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報facebookページGoogle+そしてTwitter、またRSSfeedlyLINE@にてお知らせしていますのでフォローよろしくお願い致します。


Sponsored Links