ReactでinputのonChangeが効かなくて焦った話など
Reactでちょこちょこ書いていて、嵌ったところをメモ。ちなみにECMAScript6は、ExpressもReactもあまりメリットない割に、参考資料が少なくてどう書いていいのか悩む時もあるのでやめた。Babelでreact-presetだけ使ってます。
inputのonChangeが効かなくなった
var App = React.createClass({ // getInitialStateとか、handleChangeとか、省略 render: function() { return ( <form> <input type="text" value={this.state.data} onChange={this.handleChange}/> </form> ); } }); ReactDom.render(<App/>, $("form")[0]);
上記のようなコードだったとします。コンポーネントがformタグを返すのに、ReactDom.renderの第二引数にformタグを入れてた。第二引数のDOM要素の内側をごっそり第一引数のコンポーネントで置き換える動作だったので、出来上がったHTMLはformタグが二重になってる状態です。こうなると、getInitialStateで設定した初期値は何事もなく描画されるけど、onChangeだけ効かないって不思議状態になる。HTMLの方をいじらないで済まそうとせずに、formを囲うdivを加えて修正しました。
大文字のHTMLタグはダメ
var App = React.createClass({ render: function() { return (<P>ホゲホゲ</P>); } }); ReactDom.render(<App/>, $("#app")[0]);
Pが大文字でクラッシュ。小文字に直せばOK。
タグにインラインのStyle指定
ドキュメントにちゃんと書いてありました。