Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ReactとRiotでonChangeの挙動の違い

More than 3 years have passed since last update.

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、逆もそうですが似たような書き方で挙動が違う場合があるので注意が必要なところがもっとあるのかもしれません。

yaaah93
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away