ichigoryume programming blog

プログラミングに関する備忘録。主にHTML5, C#, Swiftなど。

React

React : コンポーネントがマウントされたタイミングなどで何かしらの処理をする方法

ここが参考になる qiita.com

React : 条件におうじてrender内容を変えたい時

ここが参考になる。 www.yoheim.net

React : inputに入力された文字列を取得する

render() { return ( <input type="text" name="name" size="30" maxlength="20" onKeyPress={this.keyPressHandler.bind(this)}/> ) } keyPressHandler(e) { console.log(e.target.value) }

React : シングルクリックとダブルクリックを排他的に処理するには

シングルクリックを拿捕して、その中でタイマーを起こし、タイマー終了時にクリック数を数える。タイマーはクリック数が1(初回)のときのみ起こすようにする。 constructor(props) { super(props) this.clickCount = 0 } render() { return ( <div onClick={this.clickHandler.bind(this)}>{this.state.</div>…

React : 子要素を再帰的にrenderするには

render()内のreturn()前で子要素の構造を作り、return()内で使用する。 class Node extends React.Component { ... render() { var children = [] for(var child of this.props.model.children) { children.push(<Node model={child}/>) } return ( <div> <div>text:{this.state.text}</div> <div> {chi</div></div></node>…

React : ドラッグ&ドロップを実装するには

ドラッグ対象 draggable を true に設定する ドラッグ開始時のイベントハンドラ内で、dataTransfer.setData()をコールしてドラッグ対象要素のidなどをセットしておく constructor(props) { super(props) } dragStartHandler(e) { console.log("start") e.dat…

React : クリックイベントでstateを更新するには

onClickにハンドラをセットし、その中でsetState()をコールするだけ。 ただし、ハンドラを.bind(this)しないとハンドラ内でthisを参照できないので注意。 constructor(props) { super(props) this.state = { name: props.name } } clickHandler(e) { this.se…

React備忘録

準備 ツールのインストール npm install -g react-tools ビルドツールの起動 jsx --watch src/ build/