-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
버는을 아무리 눌러도 아무런 반응이 없습니다.
21.08.23 12:45 작성 조회수 93
1
+ 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}
답변을 작성해보세요.
2
HEROPY
지식공유자2021.08.23
박형욱 님 안녕하세요.😊
질문으로 남겨주신 코드를 복사해서 테스트를 해보니,
+ Add another card 버튼을 클릭했을 때 '수정 모드'로 잘 넘어갑니다.
아무래도 import { autoFocusout } from "~/actions/autoFocusout.js";의 autoFocusout.js 파일의 코드에 문제가 있는 것은 아닐까 추측을 해봅니다.
가장 정확하게 문제를 파악할 수 있는 것은,
현재 문제가 발생하는 프로젝트를 깃헙에 업로드한 후에 저장소 링크를 공유해 주시는 방법입니다.
혹은 좀 더 자세하게 파악할 수 있는 내용을 공유해 주시면 확인하고 바로 답변드리겠습니다.
0
HEROPY
지식공유자2021.08.24
깃헙 저장소를 공유해 주셔서 감사합니다.😊
로컬에서 바로 문제를 찾았습니다.
src/components/ListContainer.svelte 파일을 열어보면,
선언된 변수의 이름과 사용하는 변수의 이름이 다르네요.
뒤에 s가 있거나 없으니 확인해 보세요~
해당 부분을 수정하니 잘 동작하는 듯합니다~👍
답변 2