React.jsのRefsをES2015で書いてみた

初投稿です。
これから備忘録代わりにキータに記事書いて行こうと思います。
早速ですがReact.jsのrefsのサンプルをES2015で書き直しました。

React.jsのrefsについて

とりあえずrefsについてはこのリンクを見て頂ければと思いますが
http://js.studio-kingdom.com/react/guides/more_about_refs
stateにデータを流してDOM操作してると、jQueryでいうところのremoveやappendは使わないにしてもサンプルのようにある動作をした後に直接DOMを操作したいということが稀にあります。
そんな時にrefs使うと良いよっていう話しです。

とりあえず、上記リンクのコードをES2015化して行きます。

元のサンプルコード

var App = React.createClass({
    getInitialState: function() {
      return {userInput: ''};
    },
    handleChange: function(e) {
      this.setState({userInput: e.target.value});
    },
    clearAndFocusInput: function() {
      this.setState({userInput: ''}, function() {
        React.findDOMNode(this.refs.theInput).focus();
      });
    },
    render: function() {
      return (
        <div>
          <div onClick={this.clearAndFocusInput}>
          </div>
          <input
            ref="theInput"
            value={this.state.userInput}
            onChange={this.handleChange}
          />
        </div>
      );
    }
  });

これを以下のようにES2015で書き直します。

ES2015

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.clearAndFocusInput = this.clearAndFocusInput.bind(this);
  }

  handleChange(e) {
    ReactDOM.findDOMNode(this.setState({userInput: e.target.value}));
  }

  clearAndFocusInput() {
    this.setState({
      userInput: ''
    }, () => this.refs.theInput.focus());
  }

  render() {
    return (
      <div>
        <div onClick={this.clearAndFocusInput}>
        </div>
        <input
          ref="theInput"
          value={this.state.userInput}
          onChange={this.handleChange}
        />
      </div>
    )
  }
}

いくつかポイントをざっくり説明します。

setStateする時はthisをbindする

ES2015で書く時にまず気をつけないといけないのはメソッドでsetStateする時はconstructorでthisをbindしてあげないとコンソールで怒られます。

React.findDOMNodeではなく、ReactDOM.findDOMNodeを使用する

ここは若干曖昧なので迂闊なことは言えないんだけど、v0.14でReactDOMに分離してからfindDOMNodeはreact-domの中に吸収された。
ちなみにfindDOMNodeの部分を省略しても同じ挙動だったんだけど、なんでなんだろう、、、

省略した書き方

this.setState({userInput: e.target.value})

今回は以上！まだまだreact.jsについてはわからないことが多いですが、少しずつ理解して行きたいヾ(･ε･`*)