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

This post is also available in: 日本語 (Japanese)

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

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

以下サンプルコード中の、const muiTheme はMaterial UIのカラーを定義している部分で、Material UIのサイト(https://v4.mui.com/ja/customization/color/)にカラーパレットツールがあり色々と試す事ができて便利です。

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>
        );
    }
}