ReactでInput要素を処理に組み込む方法メモ。
この辺の処理はAngular.jsと比べてやりにくい気がする。
テキスト入力
refを設定することで関数からDOMを参照できる。
イベント関数で指定してやればその時々で値を処理することが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
filter(){ console.log(this.refs.intext.value); ... } render() { return ( <div> <input type="text" class="form-control" placeholder="Filter" aria-label="Filter" aria-describedby="filter" ref="intext" onKeyUp={this.filter.bind(this)}/> </div> ); } |
valueとstateを紐づけもできる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
constructor(props) { super(props); this.state = {ti:""}; } ... mychange(e){ this.setState( {ti: e.currentTarget.value} ); //以下は違う値になることに注意 console.log(e.currentTarget.value); console.log(this.state.ti); } ... <input type="text" class="form-control" value={this.state.ti} onChange={this.mychange.bind(this)}/> |
setStateは同期処理じゃないようで直後にstate参照すると更新されていない。
ラジオボタン
普通にDOMを指定して値をとってもいいけど、せっかくなのでstateに入れる。
|
1 2 3 4 5 6 |
<label> <input type="radio" name="r1" value="V1" onChange={()=>this.setState({r1: 'V1'})}/>V1 </label> <label> <input type="radio" name="r1" value="V2" onChange={()=>this.setState({r1: 'V2'})}/>V2</label> |
変更時に処理が必要な場合は無名関数の代わりにクラス内の関数を指定する。
フッターメニュー
クリックされた要素をeでとることができる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
changePage(e,idx){ document.querySelectorAll(".fmenu").forEach((v)=>{ v.classList.remove("selected"); }); e.currentTarget.classList.add("selected"); } render() { return ( <div className="row"> <div className="col-4 btn-success menu selected" onClick={(e)=>this.changePage(e,0)}>ALL </div> <div className="col-4 btn-success menu" onClick={(e)=>this.changePage(e,1)}>FAV </div> <div className="col-4 btn-success menu" onClick={(e)=>this.changePage(e,2)}>SETTING </div> </div> ) } |
React的にイベントオブジェクトを使用するのってどうなんだろう。
なんとなく違和感があるので使わないようにしてみる。
|
1 2 3 4 5 6 7 8 9 |
<div className={"col-4 btn-success menu "+this.state.r1==0?"selected":""}> onClick={()=>this.setState({"r1",0})}>ALL </div> <div className={"col-4 btn-success menu "+this.state.r1==1?"selected":""}> onClick={()=>this.setState({"r1",1})}>ALL </div> <div className={"col-4 btn-success menu "+this.state.r1==2?"selected":""}> onClick={()=>this.setState({"r1",2})}>ALL </div> |
これはこれで違和感。
所感
少しずつ慣れてきたような気がする。
処理タイミングとクラスの影響範囲に気を付ければなんとなく書ける。
bootstrap.cssを使ってますがReactBootstrapというものがあったので、これを使えばデザインするときに楽かも。もう少し慣れたら使ってみたい。