인프런 커뮤니티 질문&답변

박형욱

작성한 질문수

Svelte.js [Core API] 완벽 가이드

20. CreateCard 컴포넌트 작성

버는을 아무리 눌러도 아무런 반응이 없습니다.

작성

176

+ Add another card 버튼을 아무리 눌러도
onEditMode로 안넘어 갑니다.
onEditMode 부분에 콘솔로그 찍어보면 isEditMode는 
true로 다 잘 나옵니다.
화면에 변화만 없습니다. 다음 진도 나가고 싶은데 
나갈 수가 없네요... 
크롬 개발자 모드에서 + 클릭할때 보면 
.list 에서만 반짝 합니다.
도와주십시요~~~!!
<script>
  import { tick } from "svelte";
  import { autoFocusout } from "~/actions/autoFocusout.js";

  let isEditMode = false;
  let title = "";
  let textareaEl;

  function addCard() {}

  async function onEditMode() {
    title = "";
    isEditMode = true;
    await tick();
    textareaEl && textareaEl.focus();
  }

  function offEditMode() {
    isEditMode = false;
  }
</script>

{#if isEditMode}
  <div use:autoFocusout={offEditMode} class="edit-mode">
    <textarea
      bind:value={title}
      bind:this={textareaEl}
      placeholder="Enter a title for this card..."
      on:keydown={(event) => {
        event.key === "Enter" && addCard();
        event.key === "Esc" && offEditMode();
        event.key === "Escape" && offEditMode();
      }}
    />
    <div class="actions">
      <div class="btn success" on:click={addCard}>Add Card</div>
      <div class="btn" on:click={offEditMode}>Cancel</div>
    </div>
  </div>
{:else}
  <div class="add-another-card" on:click={onEditMode}>+ Add another card</div>
{/if}