🖱️
AstroのReactコンポーネントでクリックイベント(JavaScript event)が動かない時の対処法
AstroでReactコンポーネントを使用時にクリックイベント(JavaScript event)が動かない時の対処法になります。
AstroでReactコンポーネントを使用時にJavaScriptのイベントが動作しない。
index.astro
---
import MyComponent from '@/components/MyComponent'
---
<Layout>
<MyComponent />
</Layout>
react component
import React from 'react'
const MyComponent = () => {
const handleClick = () => {
console.log('on click')
}
return (
<div>
<Button onClick={handleClick}>ボタン</Button>
</div>
)
}
export default MyComponent
astroファイルで上記のようなクリックイベント(JavaScript event)を使ったReactコンポーネントを読み込んでも動作しませんでした。
client:loadの指定を追加することで解決
index.astro
<Layout>
<MyComponent client:load />
</Layout>
コンポーネントの呼び出し側のastroファイルでclient:loadの指定を追加することで、イベントが動作するようになりました。
<MyComponent client:visible />
<MyComponent client:idle />
<MyComponent client:only="vue" />
<MyComponent client:only="react" />
上記のように他にも色々な指定方法があるので利用場面によって選択できます。
Discussion