Reactをやっているときは何気なしにonChange
と書いていましたが
よくよく試してみるとReactの挙動は他と違ったのでメモ程度に残しておきます。
React
import React from 'react';
import ReactDOM from 'react-dom';
class MyInput extends React.Component {
handleChange(e) {
console.log(e.target.value);
}
render() {
return (
<div>
<input type="text" id="form_input" onChange={ this.handleChange.bind(this) }/>
</div>
);
}
}
ReactDOM.render(<MyInput />, document.querySelector('#myform'));
inputタグにonChange
でイベントを動かしてみると入力すると直後に内容がコンソールログに出力されることがわかると思います。
このあたりはReduxFormとか使うと想像つきやすいですがReactはstateで状態を管理していくので素でかくとこういう書き方はすると思います。
Riot
<MyInput>
<input type="text" id="form_input" onChange={ handleChange } />
<script>
this.mixin(riot.util.dom);
handleChange() {
console.log(this.$('#form_input').value);
}
</script>
</MyInput>
Reactのサンプルと同じようにonChange
イベントをはってるだけですが、動かしてると入力後は反応がありません。動くタイミングが少し違いフォーカスが外れた場合にコンソールログに出力されます。
入力された情報を直後に取得したい場合は、onKeydown
とかで取得する必要があるようです。
*2017/04/12追記
onInput
でReactと同様の動きになるということで試してみました。
<MyInput>
<input type="text" id="form_input" onInput={ handleInput } />
<script>
this.mixin(riot.util.dom);
handleInput() {
console.log(this.$('#form_input').value);
}
</script>
</MyInput>
変わったのはonChange
がonInput
になっただけです。
確かにReactと同じ動きになりました。
jQuery
jQueryはどうだったかなと思って一応確認してみました。
<input type="text" id="form_input"/>
<script>
$(document).ready(function() {
$('#form_input').on('change', function() {
console.log($(this).val());
})
});
</script>
挙動としてはRiotと同じになりました。フォーカスが外れたときにイベントが反応するようです。
*2017/04/12追記
Riotと同じようにinput
で同じ動きになります。
<input type="text" id="form_input"/>
<script>
$(document).ready(function() {
$('#form_input').on('input', function() {
console.log($(this).val());
})
});
</script>
余談ですがaddEventListener
でも同じでした。
<input type="text" id="form_input"/>
<script>
var el = document.querySelector('#form_input');
el.addEventListener('input', function() {
console.log(el.value);
});
</script>
感想
だからどうした。というかんじですなんですがそれぞれのライブラリの特徴というか思想が違うので挙動が違うのでしょうがReactからRiot、逆もそうですが似たような書き方で挙動が違う場合があるので注意が必要なところがもっとあるのかもしれません。