12/08/2018, 15:08
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再開 ...
時間が空いてしまったが再び投稿 今回で終わりです。
前回やったこと
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 ( // 省略 ); } });
ということで無駄に長引いてしまったこの企画も終了です。