如何在 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;
}

Answer 2

不确定这是否是您要查找的内容，但如果您只想跟踪每个按钮是否已被单击，您可以在all_answer 列表中的每个对象上添加一个isClicked 属性。然后在checkAnswer 中传递整个对象并在单击后翻转属性。然后重新创建all_answers 数组。

这个REPL 做了类似的事情。

<script>
let isCorrect
let isAnswered = false
let isDisabled = false

let total = 0
const addPoint = () => total += 1

function checkAnswer(answer) {
    isCorrect = answer.correct
    isAnswered = true
    answer.isClicked = true;
    if(isCorrect) {
      addPoint()
    }
    all_answers = [...all_answers]
  }

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

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