脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

React

Reactの入力フォームを空に戻す方法

構文 React.findDOMNode(this.refs.${param名}).value = ''; 例 function clearForm(){ React.findDOMNode(this.refs.command).value = ''; } var Test = React.createClass({ . . . clearForm.bind(this)(); . . . });

Reactでcss指定する方法

以下の方法で可能です 構文 セレクター.css({'要素名':'値'}); 例 jquery使ってる場合 $('.test-class').css({'visibility':'visible'}); $('.test-class > ul > li:nth-of-type(1)').css({'color':'red'});

Reactのライフサイクル

Reactのライフサイクルに関して var Life = React.createClass({ /* 描画前 ============================================================*/ getDefalutProps(){ /* 全体で一度しか呼ばれない */ /* インスタンス作成時に親コンポーネントが値を指定しなか…

Reactのjsxをプリコンパイルする方法

Reactでjsxを使っている場合、JSXTransformerを使って描画時ブラウザ側でjsx⇒HTML5に変換することが出来ます。しかし、実際にはこれを使うと以下のような警告文が出ます。 You are using the in-browser JSX transformer. Be sure to precompile your JSX fo…

Reactで呼び出す子コンポーネントを条件分岐させる方法

Reactで、条件によって表示させるコンポーネントを切り分けたい時などに、条件分岐によって切り分ける方法 記法 var ${変数名}; if (条件文1) { ${変数名}; = ${コンポーネント1}; } else { ${変数名}; = ${コンポーネント2}; } return ( <div> {${変数名}} </div> ); …

Reactのコメントアウト

Reactでコンポーネント呼び出し時にreturn内でコメントアウトする方法 記法 {/* コメントエリア */} 例 以下のようにコメントアウトしても普通に文字列として表示されてしまいます。 var Test = React.createClass( { render: function() { return ( <div> // コ</div>…

ReactのcomponentWillReceiveProps内ではまだpropsは反映されていない

とてつもなくはまったのでメモ。 componentWillReceiveProps コンポーネントのプロパティ(props)は親コンポーネントにより任意のタイミングで変更されます。 その場合、componentWillReceivePropsが呼ばれるので、そこで新しいpropsの値を参照して、 それを…

ReactでDOMの要素を直接取得・変更する方法

構文 //取得 var test = React.findDOMNode(this.refs.${ref名}).${取得したい要素名}; //格納・変更 React.findDOMNode(this.refs.${ref名}).${変更したい要素名} = ''; Example render: function() { return ( <div> <input type="text" ref="command" /> </div> ); } 上記のinputタグの中身を、例えば空…

Reactでstateに上書きではなく追加する方法

現在Reactのstateの値を変更するメソッドとして、「setState」や「replaceState」は用意されていますが、「appendState」はありません。Component API | Reactfacebook.github.ioなので、既存のstateの値に新しい値を追加したい場合は以下のように書きます t…

Reactでinputタグのautofocusを使うには

html HTML5ではinputタグの中にautofocusと書けば、Pageを表示した際に自動でフォーカスを合わせてくれます。 <input autofocus>-HTML5タグリファレンス React しかし、Reactでは下のように普通にinputタグ内にautofocusと書いても反映されません。 var Test = React.createC…

ReactでEnterキーのpushイベントを取得する方法

ReactでEnter keyが押されたときにアクションを設定する方法です。 ソースコード var Test = React.createClass( { sendCommand(e) { # <== ① var ENTER = 13; # <== ② if (e.keyCode == ENTER) { # <== ③ // Enterが押されたときのアクション } }, render: …

Reactのstate(prop)内で改行文字を使いたい場合

JSX構文 ReactはJSXを採用しているので、構文の中で以下のようにhtmlタグを直接書くようににコーディングできます。 var Test = React.createClass( { // 処理とか }, render: function() { return( <div> {this.state.foobar} </div> ); } ); しかし、このhtmlタグライ…

ReactのJSX構文内でclass属性を設定する場合

render: function() { return ( <div class='foo'>Hello React!!</p> ); } 上記のように直接class属性を指定しようするとエラーが出て怒られます Warning: Unknown DOM property class. Did you mean className?これはclassという文字がReact側で予約後として他で使われているため…

Reactで、jquery(ajax)内でsetStateしようとすると「this.setstate is not a function」って怒られて失敗する場合の対策

問題 Reactを使っていてstateにsetしようとして普通にthis.setStateとかやっていると、this.setstate is not a functionってエラーが出るときがあります。 JavaScript的にどういうかはわかりませんが、Ruby的に言うとスコープが切り替わってself(=this)が変…

[著作権] DockerやChefやGitなどのロゴをプレゼンで使うときの注意点(trademark policy)

勉強会やカンファレンスなどでプレゼンを作る際に他社のロゴをppt等に載せることがあるかと思いますが、大抵はそれぞれの会社がtrademark policyという形で使用方法を決めています。各会社毎に注意点を簡単にまとめます。全てをここには載せきれませんので、…