Svelte输入框校验功能在正确答案变更时响应式失效问题咨询

问题根因 #

初始化校验器时，你传入的$answer是store的瞬时静态值，校验逻辑生成后就固定绑定了初始答案Cheese，和后续的answerstore更新没有建立响应式关联，因此答案修改后校验规则不会同步更新。

修复方案 #

给校验逻辑加上响应式关联即可，最简单的实现方式如下：

<script>
    import { guessValidator, requiredValidator } from './validators.js'
    import { createFieldValidator } from './validation.js'
    import { writable } from "svelte/store";
    let answer = writable(null);
    let clue = writable(null);
    
    $answer = "Cheese";
    $clue = "I am smelly but tasty"
  
    // 把校验器声明改为响应式，$answer变化时自动重新生成校验规则
    let validity, validate, resetValidation
    $: [validity, validate, resetValidation] = createFieldValidator(guessValidator($answer))

    let guess = null
    
    function nextWord() {
        $answer = "Sun"
        $clue = "I don't shine at night"
        // 切换题目后清空之前的输入和校验状态
        resetValidation()
        guess = null
    }
    
</script>

<input class="input"
      type="text"
      bind:value={guess}
      placeholder={$clue}
      class:field-danger={!$validity.valid}
      class:field-success={$validity.valid}
      use:validate={guess}
      />
{#if $validity.dirty && !$validity.valid}
<span class="validation-hint">
    {$validity.message} 
</span>
{:else if $validity.valid}
<span class="validation-success">
    Correct!
</span>
{/if}

如果不想频繁重新生成校验器，也可以修改guessValidator的实现，直接传入answerstore实例而非瞬时值，在校验逻辑内部实时取$answer的最新值做比对即可。

内容的提问来源于stack exchange，提问作者RP S