2016年06月29日

Reactでinputを扱う

参考:Reactでinputを扱う - Qiita

Reactではinpuの値を自分で管理しなくちゃいけない。ES2015で書くとこんな感じになる

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
radio:"a",
text: ""
};
}
render () {
return (
<div>
<label>value a</label>
<input type="radio" name="aradio" value="A" checked={this.state.radio==='a'} onChange={() => this.setState({radio: 'a'})}/> <br />
<label>value b</label>
<input type="radio" name="aradio" value="B" checked={this.state.radio==='b'} onChange={() => this.setState({radio: 'b'})}/>
<hr />
<label>text input</label>
<input type="text" name="atext" value="" value={this.state.text} onChange={(e) => this.setState({text: e.target.value})}/>
</div>
)
}
}
render( <App/ >, document.getElementById('app'));
posted by ねこまんま at 09:54 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック