sync$() 同期イベント (BETA)
Qwik はイベントを非同期で処理します。これは、event.preventDefault() や event.stopPropagation() などの一部の API が期待どおりに動作しないことを意味します。この制限を回避するために、Qwik は sync$() API を提供し、これによりイベントを同期的に処理できます。ただし、sync$() にはいくつかの注意点があります。
sync$()は、どのステートもクロージャできません。sync$()は、スコープ内で宣言された、またはインポートされた他の関数を呼び出すことができません。sync$()は HTML にシリアライズされるため、関数のサイズに注意する必要があります。
これらの制限に対処する一般的な方法は、イベント処理を 2 つの部分に分割することです。
sync$()は同期的に呼び出され、event.preventDefault()やevent.stopPropagation()などのメソッドを呼び出すことができます。$()は非同期的に呼び出され、ステートをクロージャしたり、他の関数を呼び出すことができ、サイズに制限はありません。
sync$() はステートにアクセスできないため、それに対処する最適な戦略は何でしょうか？答えは、要素の属性を使用してステートを sync$() 関数に渡すことです。
注：デフォルトの動作を防止するだけでよい場合は、標準の
preventDefault:{eventName}構文を単に使用できます。これは、イベントを同期的に連結する必要がある場合にのみ使用します。
例: ステートを使った sync$()
この例では、いくつかのステートに基づいてリンクのデフォルトの動作を防止したい動作があります。これを行うには、コードを 3 つの部分に分割します。
sync$()：最小限に抑えられた同期部分。$()：任意に大きくすることができ、ステートをクロージャできる非同期部分。data-should-prevent-default：sync$()関数にステートを渡すために使用される要素の属性。
import { component$, useSignal, sync$, $ } from '@builder.io/qwik';
export default component$(() => {
const shouldPreventDefault = useSignal(true);
return (
<div>
<div>Sync Event:</div>
<input
type="checkbox"
checked={shouldPreventDefault.value}
onChange$={(e, target) =>
(shouldPreventDefault.value = target.checked)
}
/>{' '}
Should Prevent Default
<hr />
<a
href="https://google.com"
target="_blank"
data-should-prevent-default={shouldPreventDefault.value}
onClick$={[
sync$((e: MouseEvent, target: HTMLAnchorElement) => {
if (target.hasAttribute('data-should-prevent-default')) {
e.preventDefault();
}
}),
$(() => {
console.log(
shouldPreventDefault.value ? 'Prevented' : 'Not Prevented'
);
}),
]}
>
open Google
</a>
</div>
);
});コントリビューター
このドキュメントを改善するのに協力してくれたすべてのコントリビューターに感謝します！
