Riotでclickの挙動を確認してみた

いろいろと挙動を確認したので備忘録です。

通常のonclickからparent変数を使って親メソッドにアクセスする方法

通常

見たままです。

parent.tag

<parent>
    <input type="button" value="button1" onclick={ clickButton1 }>

    <script>
        clickButton1() {
            alert('button1がクリックされました');
        }
    </script>
</parent>

子タグから親タグのメソッドにアクセス

parent変数を使用して親タグにアクセスができます。

parent.tag

<parent>
    <input type="button" value="button1" onclick={ clickButton1 }>
    <child1></child1>

    <script>
        clickButton1() {
            alert('button1がクリックされました');
        }
        clickButton2() {
            alert('button2がクリックされました');
        }
    </script>
</parent>

child1.tag

<child1>
    <input type="button" value="button2" onClick={ parent.clickButton2 }>
</child1>

孫タグから親タグのメソッドにアクセス

parent変数を使用して...はだめでした。

parent.tag

<parent>
    <input type="button" value="button1" onclick={ clickButton1 }>
    <child1></child1>

    <script>
        clickButton1() {
            alert('button1がクリックされました');
        }
        clickButton2() {
            alert('button2がクリックされました');
        }
        clickButton3() {
            alert('button3がクリックされました');
        }
    </script>
</parent>

child1.tag

<child1>
    <input type="button" value="button2" onclick={ parent.clickButton2 }>
    <child2></child2>
</child1>

child2.tag

<child1>
    <input type="button" value="button3" onClick={ parent.clickButton3 }>
</child1>

実装したい場合は子タグから孫タグに対して情報を渡しすことでアクセスすることができるようになります。

child1.tag

<child1>
    <input type="button" value="button2" onclick={ parent.clickButton2 }>
    <child2 onclick={ parent.clickButton3 }></child2>
</child1>

child2.tag

<child1>
    <input type="button" value="button3" onClick={ opts.onclick }>
</child1>

上の例が子タグから孫タグへ〜という言い回しなのであまり用途は感じられませんが親タグのメソッドにアクセスする場合は、parent変数を使う以外にも情報を参照することで実装できるということがわかりました。

onclickで引数を渡したい場合の方法

上の例でもそうですが基本的にイベント操作を行う場合は()をつけてしまうと即時実行されてしまうのでメソッド名のみ記述します。
しかしループ処理のなかでイベント操作を行う場合は引数を渡したくなると思いますのでそのときはbindを使って実装ができるようです。

sample.tag

<sample>
    <p>
        <virtual if={selectItem}>
            { selectItem }が選択されました
        </virtual>
        <virtual if={! selectItem}>
            項目を選択してください
        </virtual>
    </p>
    <ul>
        <li each={ item in items }>
            <a href="#" onclick={ clickItem.bind(this, item.id) }>{ item.name }</a>
        </li>
    </ul>

    <script>
        this.selectItem;
        this.items = [
            { id: 1, name: '長崎市' },
            { id: 2, name: '諫早市' },
            { id: 3, name: '大村市' },
            { id: 4, name: '佐世保市' },
            { id: 5, name: '島原市' },
            { id: 6, name: '雲仙市' },
            { id: 7, name: '南島原市' },
            { id: 8, name: '松浦市' },
            { id: 9, name: '平戸市' }
        ];

        clickItem(id, e) {
            e.preventDefault();
            let item = this.items.filter(i => i.id == id);
            this.selectItem = item[0];
        }
    </script>
</sample>

上の例ではclickItem(id, e)というメソッドで引数とイベント情報を受け取るようにしています。
実際にonclick時の書き方は{ clickItem.bind(this, id) }のようにbindを使うことでメソッドにアクセスることができます。