LoginSignup
6

More than 5 years have passed since last update.

ReactとRiotでonChangeの挙動の違い

Last updated at Posted at 2017-04-11

Reactをやっているときは何気なしにonChangeと書いていましたが
よくよく試してみるとReactの挙動は他と違ったのでメモ程度に残しておきます。

React

my_input.js
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

my_input.tag
<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と同様の動きになるということで試してみました。

my_input.tag
<MyInput>
    <input type="text" id="form_input" onInput={ handleInput } />
    <script>
        this.mixin(riot.util.dom);

        handleInput() {
            console.log(this.$('#form_input').value);
        }
    </script>
</MyInput>

変わったのはonChangeonInputになっただけです。
確かにReactと同じ動きになりました。

jQuery

jQueryはどうだったかなと思って一応確認してみました。

jquery.html
<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で同じ動きになります。

jquery.html
<input type="text" id="form_input"/>
<script>
    $(document).ready(function() {
        $('#form_input').on('input', function() {
            console.log($(this).val());
        })
    });
</script>

余談ですがaddEventListenerでも同じでした。

pure.html
<input type="text" id="form_input"/>
<script>
    var el = document.querySelector('#form_input');
    el.addEventListener('input', function() {
        console.log(el.value);
    });
</script>

感想

だからどうした。というかんじですなんですがそれぞれのライブラリの特徴というか思想が違うので挙動が違うのでしょうがReactからRiot、逆もそうですが似たような書き方で挙動が違う場合があるので注意が必要なところがもっとあるのかもしれません。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6