railsでreact.js入門(3)

時間が空いてしまったが再び投稿 今回で終わりです。

前回やったこと

ajaxでAPIからデータを貰ってきて反映する。 その時に問題になるのがpropとstate propは不変のデータを、stateはユーザーのアクションによって変化するデータを扱う

環境

Rails 5.0.2 ruby 2.3.3p222 react-rails 1.11.0

参考サイト

本家大本：公式チュートリアル railsでのチュートリアルを説明してくださっているサイト：react-railsを使ってReactのTutorialをやってみる

Tutorial再開

引き続き各章ごとに学んだこと、考察などを並べていく。

Adding new comments /Optimization: optimistic updates

この章ではコメントを入力するフォームを作り、それを反映する この章でReact.findDOMNodeのエラーが出た場合の対処法はこちら

• フォームのsubmitボタンが押されたときの動作はhandleSubmit()で設定する。 書き方は以下のように書く

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    // ここにsubmit時の動作を記述
    return;
  },
  render: function() {
    <form className="commentForm" onSubmit={this.handleSubmit}>
      <input type="text" placeholder="Your name" ref="author" />
      <input type="text" placeholder="Say something..." ref="text" />
      <input type="submit" value="Post" />
    </form>
  }
});

• フォーム内でname属性の代わりにref属性を設定することで、reactのコンポーネント内でthis.refs.hogeという風にアクセスできる。
• 親のコンポーネントで処理を行いたい場合以下のようにする

var CommentBox = React.createClass({
  methodName: function(comment) {
    // ここに行いたい処理を記述する
  },
  render: function() {
    return (
      <CommentForm onCommentSubmit={this.methodName} /> //ここでcallbackを渡す！
    );
  }
});
var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    this.props.onCommentSubmit({author: author, text: text}); // ここでcallback実行する!
    return;
  }
  render: function() {
    return (
      // 省略
    );
  }
});

ということで無駄に長引いてしまったこの企画も終了です。