1.12- React masterClass (trello cloning 3)

referenceは、JSコードを使用してHTML要素を指定およびインポートする方法です.
バニラJSでdocument.getElementByIdでHTML要素をインポートするのと同じです.
userefを使用して要素をインポートできます.
例:

...
const inputRef = useRef<HTMLInputElement>(null);
const onClick = () => {
	inputRef.current.focus();
}

...

return (
	...
    <input ref={inputRef} placeholder = 'input area' /> 
    <button onClick={onClick}>click</button>
	)

これによりbuttonをクリックしてinputの要素をロードし、フォーカスさせるなどの操作ができます.
これがreferenceの機能です.
これを利用してdndにcordを追加/削除する
今回はcardにも同様、snapshotでstyledを変更

    <Draggable key={toDo} draggableId={toDo} index={index}>
      {(provided, snapshot) => (
        <Card
          ref={provided.innerRef}
          {...provided.dragHandleProps}
          {...provided.draggableProps}
          isDragging={snapshot.isDragging}
        >
          <p>🥱 {toDo}</p>
        </Card>
      )}
    </Draggable>

const Card = styled.div<{ isDragging: boolean }>`
  ...
  background-color: ${(props) =>
    props.isDragging ? "#89f7fe" : props.theme.cardColor};
  p {
    color: ${(props) => props.theme.textColor};
  }
  box-shadow: ${(props) =>
    props.isDragging ? "5px 5px 5px rgba(0,0,0,0.5)" : "none"};
`;

もっときれいになった

board、cardのstyledと機能はある程度完了しており、ユーザーが受信したデータでatom stateを埋め込み、atom stateとtypeを変更するformを作成します.
しかし、今日はなぜか分からないが、私は疲れていて、、、意識がはっきりしていないで、一日中ぼんやりしていて、やる気がなくて、私は早く寝て、明日早起きして、活気に満ちて始めます.
明日atom stateをobjに変更し、ユーザー入力を受信するフォーム機能を追加し、localstorageでのcordの保存、cordの削除、boardの削除、boardの追加機能を実現してみましょう.
ps.
今日は本当に何もしていません.朝寝坊して、季節学期の最後の授業を聞いて、勉強が集中できません.居眠りして、寝て、起きて居眠りして、休みます.
あ.
生活費ローンを申請しましたね...借金するって言ってたけど、悲しいけど、ちゃんと利用してよ!
大袈裟に書くな
明日は4时までに起きて、早くコードを完成して、8时から英语を话します!!!必ず起きて、明日は充実しています.