主页 / user-5082719

helmi77's questions

Martin Hope
helmi77
Asked: 2024-11-16 21:19:31 +0800 CST
  • 5

我正在尝试在 Svelte 5 中实现表单提交操作，但似乎遇到了一些反应性问题。

<script>
    const formData = $state({
        name: 'abc',
    })

    const saveData = (e) => {
        e.preventDefault()
        console.log(formData)
    }
</script>

<form onsubmit={saveData}>
    <input type="text" bind:value={formData.name}/>
    <button type="submit">
        Create
    </button>
</form>

<pre>
{formData.name}
</pre>

正如预期的那样，{formData.name}显示正确的值，但无论我在表单中输入什么，console.log(formData)始终都会输出。我如何在提交处理程序中检索最新的值？abc

svelte
Martin Hope
helmi77
Asked: 2024-11-08 09:16:11 +0800 CST
  • 5

我尝试在 Svelte 5 应用程序中使用 page.js 进行客户端路由，但遇到了一个奇怪的现象：当我将路由逻辑放在App.svelte组件内时，一切都正常：

<!-- App.svelte -->
<script lang="ts">
    import router from "page"
    import Index from "./pages/index.svelte"
    import About from "./pages/about.svelte"
    import NotFound from "./pages/404.svelte"

    let Page = $state(Index)

    router("/", () => Page = Index)
    router("/about", () => Page = About)
    router("*", () => Page = NotFound)

    router.start()
</script>

<Page/>

但是，当我尝试将此逻辑提取到外部模块时，路由就会失败，并且到其他页面的链接不会执行任何操作：

// router.svelte.ts
import router from "page"
import Index from "../pages/index.svelte"
import About from "../pages/about.svelte"
import NotFound from "../pages/404.svelte"

let page = $state(Index);

export const createRouter = () => {

    const registerRoutes = () => {
        router("/", () => page = Index)
        router("/about", () => page = About)
        router("*", () => page = NotFound)

        router.start()
    }

    return {
        get page() {
            return page
        },
        registerRoutes,
    }
}

现在，当我从我的 App.svelte 文件调用此路由器时，页面最初可以正确加载，但页面之间的链接不再起作用：

<!-- App.svelte -->
<script lang="ts">
    import {createRouter} from "./router.svelte";
    const router = createRouter()
    router.registerRoutes()
    let Page = router.page
</script>

<Page/>

我认为我对所涉及的反应性存在误解，但也许有人可以给我指明正确的方向。

svelte