React+TypeScript+jQueryの共存(3)


TypeScriptに置き換えていく!

React+TypeScript+jQueryの共存(2)の続きです。

今回見ていくのはこちら、Tag.jsxです。

これをTypeScriptに置き換えます。

クリックイベントがおかしい?

前回やったとおり、classのところを書き換えて…

とする…のは大丈夫ですね。

でもエラーが出まくります。

このTagコンポーネントの中で、onClick={this.handleAjax}というのがあるのですが、こいつがどうも動きません。

handleAjax: function()

とか

render: function()

とかがエラーになります。
どうやら書き方が変わるみたいですね。

handleAjax(){}

render(){}

だけで良いようです( ゚д゚)!

それから、これまでfunctionの区切りごとについていた「,」も必要ないみたい。

…こうなりました。

でも、まだ動かない!

いろいろ調べてみると、onClickしたときには、thisをbindしてやらないといけないらしいです。
ここを書き換えます。

ちなみにこれ、ほかにもやり方があるみたいで、consructor()でまとめて指定しておくこともできるようです。
URLForm.tsxのTagFormコンポーネントで使ってみました。

それから、jQuery使ってるとよく、引数にe入れてe.stopPropagation()とか、e.preventDefault()とかしますね。
あれもそのままではうまくいきません。
eってなによ?ってエラー出ます。
そこで、e自体にもちゃんと型定義をしてあげないといけません。

雑ですね!

何を指定したらいいのかわからないからとりあえずanyにしておきました。
とにかくコンパイル通るまではany振りまいておく!

あと、privateとかつけておくこともできるそうです。

とりあえず今回はここまで!
次回はref属性の問題と、map()がうまくいかない問題を片づけた話です。

React+TypeScript+jQueryの共存(4)