Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

React.jsその0005 ボタンのonClickイベントでclassを取ったり付けたりする

制作 javascript reactjs

バージョン

React v0.13.2

react_sample.htmlの記述内容

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
    <script type="text/jsx" src="app/react_sample.js"></script>
  </head>
  <body>
    <style type="text/css">
      .example{
        display:none;
      }
      .is-show{
        display: block;
      }
    </style>
    <div id="example"></div>
  </body>
</html>

react_sample.jsの記述内容

var App = React.createClass({
  //this.state.isShowを宣言
  getInitialState() {
    return {
      isShow : true
    };
  },
  //toggleメソッドを定義
  toggle(e) {
    this.setState({isShow: !this.state.isShow });
  },
  //renderメソッドの戻り値として、Virtual DOMの定義を返す。
  render() {
    return (
      <div>
        <button onClick={this.toggle}>change</button>
        <p className = {'example' + (this.state.isShow ? ' is-show' : '')}>
          テキスト
        </p>
      </div>
    );
  }
});


//React.render();で#exampleの中にDOMを描画
React.render(
  <App></App>,
  document.getElementById('example')
);