在 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

不确定这是否是您要查找的内容，但如果您只想跟踪是否单击了每个按钮，则可以在 [=12] 中的每个对象上添加一个 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}

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

How to disabled button after 1 time clicked in Svelte?

svelte

svelte-3