virtual-dom

Matt-Esch/virtual-dom で Element の focus() を呼び出す

More than 3 years have passed since last update.


問題

Matt-Esch/virtual-dom を使用している状況で、Element の focus() を呼び出したい。


解決策

Matt-Esch/virtual-dom の Hook を使う。公式の FAQ に書いてある

以下は例。

class FocusHook {

private focus: boolean;

constructor(focus: boolean) {
this.focus = focus;
}

hook(e: any) {
if (focus) e.focus();
}
}

const view = (isFocus: boolean) => {
const items: { focus: boolean; }[] = [
{ label: 'item1', focus: false },
{ label: 'item2', focus: true }
];
return items.map(item => {
return h('input', {
'ev-focus': new FocusHook(item.focus)
})
});
};

// ...

おそらく e.focus()nextTick で呼び出すほうが望ましいだろう。ちなみに Matt-Esch/virtual-domfocus-hook.js を含んでいる (利用方法はなさそう) ので、そういう形で書くほうが良いかも。