如何在 Svelte 中点击 1 次后禁用按钮？

Question

您好，我有一个测验应用程序，可以循环选择题。我循环使用的选择使用按钮{#each}。

我试图在单击按钮后禁用 1 个按钮，但没有成功。

如何在 Svelte 中单击按钮后禁用单个按钮？

let isCorrect
let isAnswered = false
let isDisabled = false

function checkAnswer(correct) {
    isCorrect = correct
    isAnswered = true
    isDisabled = true
    if(isCorrect) {
      addPoint()
    }
  }

let all_answers = [
  {answer: 'Elton John', correct: false},
  {answer: 'Andrew Gold', correct: true}, 
  {answer: 'Leo Sayer', correct: false},  
  {answer: 'Barry White ', correct: false}
]

{#each all_answers as answer}
  <button on:click={() => checkAnswer(answer.correct)}>
    {@html answer.answer} 
  </button>
{/each}

Answer 1

您可以从当前事件中获取对与之交互的元素的引用。

首先，将事件传递给处理程序：

<button on:click={(e) => checkAnswer(e, answer.correct)}>

在事件处理程序中，获取对被单击的按钮元素的引用并禁用它：

function checkAnswer(e, correct) {
  isCorrect = correct;
  isAnswered = true;
  isDisabled = true;
  if (isCorrect) {
    addPoint();
  }

  // get the button element and disable it
  const node = e.currentTarget;
  node.disabled = true;
}