React Js Master #10 Ref,CrossBoardMovement

직접입력하는 화면만들기 

Reference

 

react코드를 이용해 html요소를 지정하고 , 가져올 수 있는 방법 

beatifuldnd에서 ref사용한거 참고 

 

function Board({ toDos, boardId }: IBoardProps) {
    const inputRef = useRef<HTMLInputElement>(null);
    const onClick = () => {
        inputRef.current?.focus(); inputRef의 current element가져와서 focus 하기
    };
    return (
        <Wrapper>
            <Title>{boardId}</Title>
            <input ref={inputRef} placeholder="grab me" />   

 

--> click버튼을 누르면 input element focus됨

 

 

지금부터 고치려는 것은 string말고 object를 옮기게되어서 !.

 

https://github.com/UHyun-K/trello-clone/commit/ac1e12e9d4a778c1b6c13b63e9d413c2aaaf3ee7

참고

 

onDragEnd는 string인 draggableId를 value로 사용하고 있었음. //이 전 ["A","b"] 문자열 그대로 받아서 다음 수식  같이 이용하였음.       

   if (destination.droppableId !== source.droppableId) {
            // cross board movement
            setToDos((allBoards) => {
                const sourceBoard = [...allBoards[source.droppableId]];
                const destinationBoard = [
                    ...allBoards[destination.droppableId],
                ];
                sourceBoard.splice(source.index, 1);
                destinationBoard.splice(destination?.index, 0, draggableId);
                return {
                    ...allBoards,
                    [source.droppableId]: sourceBoard,
                    [destination.droppableId]: destinationBoard,
                };
            });

draggableId가 todo의  object로 받지않고 id만 의미하니 

value 다른방법으로 toDo의 id를 찾아야함.

 

 

우리가 찾으려는것 무엇을 움직였냐 

 

두가지 방법 

id로 todo를 찾거나 index로 위치를 알아내

{text:"read", id:2}

 

 

CrossBoardMovement

같은방식으로 함. 

    setToDos((allBoards) => {
                const sourceBoard = [...allBoards[source.droppableId]]; //"todo"
                const taskObj = sourceBoard[source.index]; // {text:"hello" id:"1"}
                const destinationBoard = [
                    ...allBoards[destination.droppableId],
                ]; //"done"

                sourceBoard.splice(source.index, 1); //"toDo"에 {text:"hello" id:"1"} 삭제
                destinationBoard.splice(destination?.index, 0, taskObj); // ""done"에 {text:"hello" id:"1"}추가
                return {
                    ...allBoards,
                    [source.droppableId]: sourceBoard,
                    [destination.droppableId]: destinationBoard,
                };
            });