（11）svelte 教程：Forms

（11）svelte 教程：Forms

什么是 Forms

在 Svelte 框架中，Forms 是一种用于处理用户输入数据的机制。通过 Forms，你可以创建各种输入控件，如文本框、复选框、选择框等，以便用户填写并提交数据。Svelte 提供了数据绑定、事件处理等功能，使得处理表单数据变得更加简便和直观。

逐行解释代码

App.svelte

<script>
    import Modal from './Modal.svelte';
    import AddPersonForm from './AddPersonForm.svelte';

    let showModal = false;

    let toggleModal = () => {
      showModal = !showModal;
    };
</script>

• import Modal from './Modal.svelte';

  • 从当前目录中导入名为 Modal 的 Svelte 组件。

• import AddPersonForm from './AddPersonForm.svelte';

  • 从当前目录中导入名为 AddPersonForm 的 Svelte 组件。

• let showModal = false;

  • 声明一个名为 showModal 的变量，初始值为 false。这个变量用于控制 Modal 组件的显示与隐藏。

• let toggleModal = () => { showModal = !showModal; };

  • 声明一个名为 toggleModal 的箭头函数。这个函数的作用是切换 showModal 的值，使其在 true 和 false 之间切换。

<Modal {showModal} on:click={toggleModal}>
    <AddPersonForm />
</Modal>

• <Modal {showModal} on:click={toggleModal}>

  • 使用 Modal 组件，并传递两个属性：
    • {showModal}：将 showModal 变量的当前值传递给 Modal 组件，使其能够根据该值决定是否显示。
    • on:click={toggleModal}：监听 Modal 组件的 click 事件，当该事件触发时，调用 toggleModal 函数。

• <AddPersonForm />

  • 在 Modal 组件中使用 AddPersonForm 组件，表示在模态框中嵌入一个表单。

<main>
    <button on:click={toggleModal}>Open Modal</button>
</main>

• <main> 和 <button on:click={toggleModal}>Open Modal</button>
  • 创建一个 main 元素，并在其内部创建一个按钮。
  • on:click={toggleModal}：为按钮绑定 click 事件，当按钮被点击时，调用 toggleModal 函数，切换 showModal 的值，从而控制 Modal 的显示与隐藏。

Modal.svelte

<script>
    export let showModal = false;
    export let isPromo = false;
</script>

• export let showModal = false;

  • 声明并导出一个名为 showModal 的变量，初始值为 false。这个变量由外部（父组件）传入，用于控制 Modal 组件的显示与隐藏。

• export let isPromo = false;

  • 声明并导出一个名为 isPromo 的变量，初始值为 false。这个变量用于控制 Modal 组件是否具有 promo 样式。

{#if showModal}
    <!-- svelte-ignore a11y-click-events-have-key-events -->
    <div class="backdrop" class:promo={isPromo} on:click|self>
      <div class="modal">
        <slot></slot>
      </div>
    </div>
{/if}

• {#if showModal}

  • Svelte 的条件渲染语句。如果 showModal 为 true，则渲染内部的内容。

• <!-- svelte-ignore a11y-click-events-have-key-events -->

  • Svelte 的注释，忽略关于 a11y-click-events-have-key-events 的可访问性警告。

• <div class="backdrop" class:promo={isPromo} on:click|self>

  • 创建一个 div 元素，类名为 backdrop，并根据 isPromo 的值动态添加 promo 类。
  • on:click|self：为 div 绑定 click 事件，并添加 self 修饰符。该修饰符确保只有在直接点击 div 元素时才会触发事件处理函数，而不会在其子元素上触发。

• <div class="modal">

  • 创建一个类名为 modal 的 div 元素，用于显示模态框的内容。

• <slot></slot>

  • 创建一个默认插槽。如果父组件提供了插槽内容，则渲染该内容；否则，插槽内容为空。

AddPersonForm.svelte

<script>
    let name;
    let beltColour;
    let age;
    let skills = [];

    const handleSubmit = () => {
      console.log(name, beltColour, age, skills);
    };
</script>

• let name;

  • 声明一个名为 name 的变量，用于存储用户输入的名字。

• let beltColour;

  • 声明一个名为 beltColour 的变量，用于存储用户选择的腰带颜色。

• let age;

  • 声明一个名为 age 的变量，用于存储用户输入的年龄。

• let skills = [];

  • 声明一个名为 skills 的数组，用于存储用户选择的技能。

• const handleSubmit = () => { console.log(name, beltColour, age, skills); };

  • 声明一个名为 handleSubmit 的箭头函数，当表单提交时调用此函数，输出用户输入的名字、腰带颜色、年龄和技能。

<form on:submit|preventDefault={handleSubmit}>
    <input type="text" placeholder='name' bind:value={name}>
    <input type="number" placeholder='age' bind:value={age}>
    <label>