面试题：Svelte双向绑定复杂表单场景处理

Question

假设有一个包含多个输入框（文本框、单选框、复选框）和下拉选择框的复杂表单，要求实现整个表单与一个对象数据的双向绑定。请编写Svelte代码实现此功能，并阐述如何处理不同表单元素类型的双向绑定细节。

Answer 1

Svelte 代码实现双向绑定

首先，创建一个 Svelte 组件，假设名为 ComplexForm.svelte：

<script>
    // 定义对象数据
    let formData = {
        textInput: '',
        radioInput: 'option1',
        checkboxInput: false,
        selectInput: 'value1'
    };

    const options = [
        { value: 'value1', label: 'Option 1' },
        { value: 'value2', label: 'Option 2' }
    ];
</script>

<form>
    <!-- 文本框双向绑定 -->
    <label for="textInput">文本框:</label>
    <input type="text" bind:value={formData.textInput} id="textInput">

    <!-- 单选框双向绑定 -->
    <label>单选框:</label>
    <input type="radio" bind:group={formData.radioInput} value="option1"> Option 1
    <input type="radio" bind:group={formData.radioInput} value="option2"> Option 2

    <!-- 复选框双向绑定 -->
    <label>复选框:</label>
    <input type="checkbox" bind:checked={formData.checkboxInput}>

    <!-- 下拉选择框双向绑定 -->
    <label for="selectInput">下拉选择框:</label>
    <select bind:value={formData.selectInput} id="selectInput">
        {#each options as option}
            <option value={option.value}>{option.label}</option>
        {/each}
    </select>
</form>

<p>当前表单数据: {JSON.stringify(formData)}</p>

不同表单元素类型双向绑定细节

1. 文本框（<input type="text">）：

   • 在 Svelte 中，使用 bind:value 指令来实现双向绑定。bind:value={formData.textInput} 将输入框的值与 formData.textInput 进行双向绑定。当输入框的值发生变化时，formData.textInput 也会随之更新；反之，当 formData.textInput 的值改变时，输入框也会显示新的值。

2. 单选框（<input type="radio">）：

   • 使用 bind:group 指令来处理单选框的双向绑定。bind:group={formData.radioInput} 将一组单选框与 formData.radioInput 进行绑定。每个单选框需要设置一个不同的 value 属性，当用户选择某个单选框时，formData.radioInput 的值会更新为所选单选框的 value 值。

3. 复选框（<input type="checkbox">）：

   • 通过 bind:checked 指令实现双向绑定。bind:checked={formData.checkboxInput} 将复选框的选中状态与 formData.checkboxInput 进行绑定。如果复选框被选中，formData.checkboxInput 为 true；反之则为 false。

4. 下拉选择框（<select>）：

   • 利用 bind:value 指令实现双向绑定。bind:value={formData.selectInput} 将下拉选择框的值与 formData.selectInput 进行绑定。<option> 标签的 value 属性决定了选中时 formData.selectInput 所更新的值。当用户选择不同的选项时，formData.selectInput 会相应地更新。