（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>Skills:</label> <input type="checkbox" bind:group={skills} value="fighting">fighting<br> <input type="checkbox" bind:group={skills} value="sneaking">sneaking<br> <input type="checkbox" bind:group={skills} value="running">running<br> <label>Belt colour:</label> <select bind:value={beltColour}> <option value="black">black</option> <option value="orange">orange</option> <option value="brown">brown</option> <option value="white">white</option> </select> <button>Add Ninja</button> </form> 

• <form on:submit|preventDefault={handleSubmit}>
  • 创建一个表单素，并绑定 submit 事件。当表单提交时调用 handleSubmit 函数，并通过 preventDefault 修饰符阻止默认的表单提交行为（即页面刷新）。
• <input type="text" placeholder='name' bind:value={name}>
  • 创建一个文本输入框，用于输入名字。通过 bind:value 双向绑定，将用户输入的值赋给 name 变量。
• <input type="number" placeholder='age' bind:value={age}>
  • 创建一个数字输入框，用于输入年龄。通过 bind:value 双向绑定，将用户输入的值赋给 age 变量。
• <label>Skills:</label>
  • 创建一个标签，用于描述下面的技能选项。
• <input type="checkbox" bind:group={skills} value="fighting">fighting<br>
  • 创建一个复选框，用于选择 “fighting” 技能。通过 bind:group 将复选框的值绑定到 skills 数组中。
• <input type="checkbox" bind:group={skills} value="sneaking">sneaking<br>
  • 创建一个复选框，用于选择 “sneaking” 技能。通过 bind:group 将复选框的值绑定到 skills 数组中。
• <input type="checkbox" bind:group={skills} value="running">running<br>
  • 创建一个复选框，用于选择 “running” 技能。通过 bind:group 将复选框的值绑定到 skills 数组中。
• <label>Belt colour:</label>
  • 创建一个标签，用于描述下面的腰带颜色选项。
• <select bind:value={beltColour}>
  • 创建一个选择框，用于选择腰带颜色。通过 bind:value 将选择框的值绑定到 beltColour 变量。
• <option value="black">black</option>
  • 创建一个选项，值为 “black”，显示为 “black”。
• <option value="orange">orange</option>
  • 创建一个选项，值为 “orange”，显示为 “orange”。
• <option value="brown">brown</option>
  • 创建一个选项，值为 “brown”，显示为 “brown”。
• `<option

  value=“white”>white`

  • 创建一个选项，值为 “white”，显示为 “white”。
• <button>Add Ninja</button>
  • 创建一个提交按钮，标签为 “Add Ninja”。

以上代码展示了如何在 Svelte 中使用 Forms 来创建一个带有文本输入框、数字输入框、复选框和选择框的表单。通过数据绑定和事件处理，用户输入的数据可以方便地收集和处理。

App.svelte 完整代码

<script> import Modal from './Modal.svelte'; import AddPersonForm from './AddPersonForm.svelte'; let showModal = false; let toggleModal = () => { 
    showModal = !showModal; }; </script> <Modal { 
   showModal} on:click={ 
   toggleModal}> <AddPersonForm /> </Modal> <main> <button on:click={ 
   toggleModal}>Open Modal</button> </main> <style> main { 
    text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } @media (min-width: 640px) { 
    main { 
    max-width: none; } } </style> 

Modal.svelte 完整代码

<script> export let showModal = false; export let isPromo = false; </script> { 
   #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} <style> .backdrop{ 
    width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.8); } .modal{ 
    padding: 10px; border-radius: 10px; max-width: 400px; margin: 10% auto;; text-align: center; background: white; } .promo .modal{ 
    background: crimson; color: white; } </style> 

AddPersonForm.svelte 完整代码

<script> let name; let beltColour; let age; // let fighting = false; // let sneaking = false; // let running = false; let skills = []; const handleSubmit = () => { 
    console.log(name, beltColour, age, skills); }; </script> <form on:submit|preventDefault={ 
   handleSubmit}> <input type="text" placeholder='name' bind:value={ 
   name}> <input type="number" placeholder='age' bind:value={ 
   age}> <!-- svelte-ignore a11y-label-has-associated-control --> <label>Skills:</label> <!-- <input type="checkbox" bind:checked={ 
   fighting}>fighting<br> <input type="checkbox" bind:checked={ 
   sneaking}>sneaking<br> <input type="checkbox" bind:checked={ 
   running}>running<br> --> <input type="checkbox" bind:group={ 
   skills} value="fighting">fighting<br> <input type="checkbox" bind:group={ 
   skills} value="sneaking">sneaking<br> <input type="checkbox" bind:group={ 
   skills} value="running">running<br> <!-- svelte-ignore a11y-label-has-associated-control --> <label>Belt colour:</label> <select bind:value={ 
   beltColour}> <option value="black">black</option> <option value="orange">orange</option> <option value="brown">brown</option> <option value="white">white</option> </select> <button>Add Ninja</button> </form>