【react-cordova】selectタグの使い方

asaba 著者:asaba

【react-cordova】selectタグの使い方

selectタグを使ってsetstateで値を渡す方法を見つけたので、備忘録として残します(あんまり情報がなかったので探している方は参考にしてみてください!)


this.watch = this.watch.bind(this);

watch() {

var months = this.state.months;

$.ajax({
url: "test.html",
contentType: 'application/json; charset=UTF-8',
data : {

months,

},
success: function(data, textStatus){
console.log(months);

},
error: function(xhr, textStatus, errorThrown){
console.log("ban");
}
});
}

render下にコンポーネントを追加


<select
value={this.state.months}
onChange={ e => this.setState({months: e.target.value}) };
<option value="1"></option>;

</select>;

ES6で書いています。

まずrender内を見ると、valueでthis.state.monthsがデフォルトで最初に生成されています。

下のonchangeを踏むごとに発火してsetstateでajaxで値を飛ばしています。

option valueでは、表示したい値を設定しています。この時に一番上でbindするのを忘れないでください。

jsx内の関数は、html経験者が見るとうわってなると思いますが、stateの流れを理解すれば簡単に実装することができます。

reactで何すればいいの、stateとかpropの使い方が分からないという方はこれをひな型にしてみてください。それでは。
 

  • この記事いいね! (0)

著者について

asaba

asaba author

最近のマイブームはプチ旅行と子供をあやすアプリを作る事です。