userefによるチャットUIの実装

useref文法は習ったことがありますが、適当な使い方が見つからないので、今回使ったことがありますが、思ったより簡単なので、簡単に使えます.

このようにUIを取得し、チャットを入力します.

現在の時間と入力された内容がチャットリストに追加されていることがわかります.
チャットデータの基本構造

const [chatList, setChatList] = useState([
        {
            no: 1,
            id: 'student1',
            chat: 'hahahahahaha',
            date: '11-16 15:34:49'
        },
        {
            no: 2,
            id: 'student2',
            chat: 'hahaha',
            date: '11-16 15:34:49'
        },
        {
            no: 3,
            id: 'student3',
            chat: 'hahaha',
            date: '11-16 15:34:49'
        },
        {
            no: 4,
            id: 'student4',
            chat: 'hahaha',
            date: '11-16 15:34:49'
        },
        {
            no: 5,
            id: 'student5',
            chat: 'hahaha',
            date: '11-16 15:34:49'
        },
    ]);

ユーザ入力時には,入力内容でチャットリストを再編成する必要があるため,今回もhookを用いた.
現在時間はmoment()でデータを受信しています.

const nowTime = moment().format('MM-DD HH:mm:ss');

チャットリストに追加するには、[コミット](Submit)ボタンを押します.

const handleAddChat = () => {
        if (chatContents.length === 0) {
            alert('채팅 내용을 입력해주세요')
        } else {
            setChatList(prev => [...prev,
                {
                    no: chatList.length + 1,
                    id: `student${chatList.length+1}`,
                    chat: chatContents,
                    date: nowTime
                }
            ])
        }
    }

チャットするたびに、スクロールは一緒に下に移動します.

<div className="ChatWrapper">
   <div className="chatList" ref={chatInput}>
      {
         chatList.map((item) => {
            return (
               <div className="chatContents">
                  <span className="id">{item.id}</span>
                  <span className="chat">{item.chat}</span>
                  <span className="date">{item.date}</span>
               </div>
             )
         })
      }
    </div>
    <div className="chatArea">
       <input 
          type="text"
          value={chatContents}
          onChange={(e)=>setChatContents(e.target.value)}
          onKeyPress={pressEnter}
        /> 
        <button onClick={() =>handleAddChat()}>전송</button>
    </div>
</div>

スクロールするdivラベルにrefと書きます.

 useEffect(()=>{
        setChatContents('')
        scrollToBottom()
    },[chatList])
    
 const scrollToBottom = () => {
      const {scrollHeight, clientHeight} = chatInput.current;
      chatInput.current.scrollTop = scrollHeight - clientHeight
 }

chatlistの値が変更されるたびに、関数が呼び出されます.
Inputでは転送ボタンを押さず、Enterキーを押すときも以下のように動作したいので、InputタグにonKeyPressを使用しました.