使用 Astro 时如何通过按钮中的 onclick 调用脚本内的函数？

Question

这是我的例子。如何从按钮调用greeting()函数？

---
import Layout from "@layouts/Layout.astro";
const greeting = () => {
  console.log("Hello, server");
};
---

<Layout title="Hello, world" class="pt-10">
  <h1>I'm wondering</h1>
  <button onclick="">Click me</button>
</Layout>

Answer 1

我不相信 Astro 能做到这一点。

无论是在构建还是渲染（SSG 或 SSR）时，frontmatter 始终在服务器上处理。 Frontmatter 变量使用

JSON.stringify()

进行序列化。

按钮的onclick是在客户端处理的，只能利用客户端已有的功能。

Astro 文档建议在

addEventListener

标签中使用

<script>

来实现 onclick 功能：https://docs.astro.build/en/guides/client-side-scripts/#handle-onclick-and-other-events

---
import Layout from "@layouts/Layout.astro";
---
<Layout title="Hello, world" class="pt-10">
  <h1>I'm wondering</h1>
  <button id="tgt">Click me</button>
</Layout>
<script>
  const tgt = document.querySelector("#tgt");
  tgt.addEventListener("click", () => {
    console.log("Hello, on client");
  });
</script>

如果您希望客户端上的表单在服务器上运行功能：https://docs.astro.build/en/recipes/build-forms/