ReactとMaterial-UIを使ってみた

# 導入
## npm install

    $ npm i -S react-tap-event-plugin
    $ npm i -S material-ui

## app.jsの初めでReact-Tap-Event-Pluginを呼ぶ

```js
import injectTapEventPlugin from 'react-tap-event-plugin';
    
// Needed for onTouchTap 
// http://stackoverflow.com/a/34015469/988941 
injectTapEventPlugin();
```

## 一番親のReactComponentでthemeをセットする

```js
import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);
```

# text fieldのvalueを外から操作する

## text field自体のイベントならドキュメントのサンプル通りでできる

```js
import React from 'react';
import TextField from 'material-ui/TextField';
    
class FormInput extends React.Component {
    
  constructor(props) {
    super(props);

    this.state = {
      value: 'Property Value',
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      value: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <TextField
          hintText="message"
          value={this.state.value}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default FormInput;
```

他のコンポーネントのイベント（例えばボタン）で取る方法がわからなかった。

## 取得は下記で出来た

```js
import React from 'react';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import TextField from 'material-ui/TextField';

class FormInput extends React.Component {
  constructor(props) {
    super(props);

    this.send = this.send.bind(this);
  }

  send(e) {
    e.preventDefault();
    console.log(this.refs.myInput.getValue().trim());
  }

  render() {
    return (
      <form>
        <TextField
          hintText="message"
          ref="myInput"
          defaultValue=""
        />
        <FloatingActionButton onTouchTap={this.send}>
          <ContentAdd />
        </FloatingActionButton>
      </form>
    );
  }
}

export default FormInput;
```

## 操作

```js
this.refs.myInput.getDOMNode().value = null;
```

などイロイロ試したが、下記でできた。

```js
this.refs.myInput.input.value = null;
```

がなんかダサい（JQuery時代と変わらない）し、Reactっぽくない気がする。

よく考えるとメソッドの後にnullにしているということは状態を管理しているのでstateとして扱うのが正解なのかも。

## state化

```js
import React from 'react';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import TextField from 'material-ui/TextField';

class FormInput extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: '',
    };

    this.send = this.send.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  send(e) {
    e.preventDefault();
    console.log(this.state.message.trim());
    this.setState({
      message: '',
    });
  }

  handleChange(e) {
    this.setState({
      message: e.target.value,
    });
  }

  render() {
    return (
      <form>
        <TextField
          hintText="type message here"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <FloatingActionButton onTouchTap={this.send}>
          <ContentAdd />
        </FloatingActionButton>
      </form>
    );
  }
}

export default FormInput;
```

コード量を増えましたが、どこで値が変更されているかが明示的になり、DOMを直接いじっている間もなくなりました。

# 参考
* Support for ref's on Input component<br />https://github.com/callemall/material-ui/issues/2
* 公式<br />http://www.material-ui.com/#/get-started/installation