• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

실습하던 중 질문 드립니다!

20.04.08 15:15 작성 조회수 85

0

제로초님 안녕하세요! 해당 강의를 듣고 포트폴리오를 만들고 있는 학생입니다.

투두리스트를 만들던 중, 이미 저장된 투두 텍스트를 클릭할 시 수정모드로 바뀌어

텍스트에서 인풋폼으로 바뀌고, 해당 인풋폼에 포커스가 맞추어지는 기능을 넣고자 합니다.

state인 editingMode를 텍스트를 클릭할 경우 true로 바꾸고,

editingMode가 true라면 span태그가 아닌 수정 가능한 input태그를 보여주는 방식으로 진행하고자 합니다.

input폼에 포커스가 맞추어지도록 하기 위해서 useRef를 이용하여 current.focus()를 사용하였는데요.

input이 없었다가 나중에 나타나는거여서 그런지 ref인 todoInput의 값이 undefined로 뜨네요 ㅠㅠ

useCallback을 이용해서 변하는 배열에 todoInput.current를 넣어주었는데도

계속 todoInput이 undefined로 떠서 어떤 식으로 진행을 해야 하는지 조언을 얻고자 질문글 드립니다 ㅠㅠ

해당 코드입니다! (투두리스트의 todoItem 컴포넌트입니다)

import React, {useState, useCallback, useRef} from 'react';
import { useDispatch } from 'react-redux';
import { checkTodoAction } from '../reducers/todo';

const TodoItem = ({item, index}) => {
const dispatch = useDispatch();
const [editedTodo, setEditedTodo] = useState('');
const [editingMode, setEditingMode] = useState(false);
const todoInput = useRef();

const checkTodo = useCallback(() => {
dispatch(checkTodoAction);
},[]);

const editModeStart = useCallback(() => {
console.log(todoInput);
setEditingMode(true);
todoInput.current.focus();
}, [todoInput.current]);

const editTodo = useCallback((e) => {
setEditedTodo(e.target.value);
}, []);

const editModeEnd = useCallback(() => {
setEditingMode(false);
// dispatch(editTodoAction);
}, []);

return (
<>
<li>
<button onClick={checkTodo}>{item.checked? '체크취소' : '체크'}</button>
{editingMode?
<input type="text" value={editedTodo || item && item.content} ref={todoInput}
onChange={editTodo} onBlur={editModeEnd}/>
:
<span
style={item.checked? {textDecorationLine:'line-through'}: {textDecorationLine:'none'}}
onClick={editModeStart}
>{item.content}</span>
}
</li>
</>
);
}

export default TodoItem;

문제가 되는 코드는 editModeStart 함수와 input태그입니다. 조언 주시면 감사하겠습니다!

답변 1

답변을 작성해보세요.

0

다시 확인해보니까 이렇게 뜨네요 ㅠㅠ