面试题：Svelte中如何有效管理复杂表单状态

采用的Svelte特性

响应式声明：Svelte通过$: 语法来实现响应式。对于表单中的各个输入元素，其值的变化会自动触发依赖于这些值的其他部分更新。例如，当下拉框的值改变时，可能会影响到文本框的可输入状态或者复选框的选中状态，利用响应式声明可以简洁地处理这种联动关系。
存储（Stores）：Svelte的存储机制可以方便地管理共享状态。对于复杂表单，将表单的整体状态存储在一个可观察的存储中，使得不同组件间可以轻松共享和同步状态。如writable存储可用于创建可读写的状态，组件可以订阅这个存储，当状态变化时自动更新。

关键代码结构示例

创建存储：

<script>
    import { writable } from'svelte/store';

    // 创建表单状态存储
    const formStore = writable({
        textValue: '',
        selectValue: '',
        checkboxValue: false
    });
</script>

表单组件：

<script>
    import { formStore } from './stores.js';
    import { subscribe } from'svelte/store';

    let textValue;
    let selectValue;
    let checkboxValue;

    const unsubscribe = subscribe(formStore, (value) => {
        textValue = value.textValue;
        selectValue = value.selectValue;
        checkboxValue = value.checkboxValue;
    });

    const handleTextChange = (e) => {
        formStore.update((state) => {
            state.textValue = e.target.value;
            return state;
        });
    };

    const handleSelectChange = (e) => {
        formStore.update((state) => {
            state.selectValue = e.target.value;
            // 根据selectValue联动其他状态
            if (state.selectValue === 'option1') {
                state.checkboxValue = true;
            } else {
                state.checkboxValue = false;
            }
            return state;
        });
    };

    const handleCheckboxChange = (e) => {
        formStore.update((state) => {
            state.checkboxValue = e.target.checked;
            return state;
        });
    };
</script>

<label>
    文本框:
    <input type="text" bind:value={textValue} on:input={handleTextChange}>
</label>

<label>
    下拉框:
    <select bind:value={selectValue} on:change={handleSelectChange}>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
    </select>
</label>

<label>
    复选框:
    <input type="checkbox" bind:checked={checkboxValue} on:change={handleCheckboxChange}>
</label>

面试题：Svelte中如何有效管理复杂表单状态

知识考点

面试题答案

采用的Svelte特性

关键代码结构示例