【react・react-native】reactとreact-native・それぞれのボタンの定義比較

仕事でcordovaを使う傍らreact-nativeをちまちま動かしていますが、ところどころ従来のjavascriptと

react-nativeとでボタンのクリックイベントの定義の方法が異なっているなぁと感じたのでその違いをメモ。

ボタンのクリックイベントに関数を渡す時の差異なのですが、通常のreactで

はコンストラクタにbindにまとめます。

constructor(props) {
super(props);
this.getName = this.getName.bind(this);
}

getName(){
//something to do
}

ここにbindとして追加することでボタンにgetName関数を使えるようになります

render() {
return (
<Button onClick={this.getName}>はい</Button>
)
}

onClick内にそのまま処理を書く場合はこんな感じです。↓

<Button onClick={() => this.setState({ count: this.state.count + 1 })}>加算</Button>

reactのボタン定義はこんな感じ。コンストラクタにbindを忘れないよう意識する必要があります。

続いてreact-nativeの場合はこんな感じ。

//entrance.js

start(id){
console.log(id);
}

//関数を渡す
<CircleButton press={() => {this.start(1)}} text="三日間コース"/>

//CircleButton.js

//関数を受け取る
<Button style={ButtonText} onPress={props.press} title={props.text}></Button>

react-nativeは、bindで最初に定義する必要もなくそのまま関数を子コンポーネントに渡して

使うことができます。また、受け渡す場合はpress={() => {this.start(1)}}のように

カッコ・アロー・{this.xxx()}のようにアロー関数のような感じで定義します。

両者のボタンの動きの違いはこんな感じです。

自分は最初「reactと同じだろ？かまへんかまへんw」みたいなノリで作ってしまったのでこの違いに分かるまで数十分もかけてしまい

ました。react経験者であるほど沼るポイントだと思っているので今こうやってメモさせていただきました。