样式修改

example/src/RoomPage.tsx

@@ -77,6 +77,12 @@ export const RoomPage = () => {
     const chatArea: any = document.getElementById('chat-area');
     chatArea.style.display = 'none';
   }
+  const handleKeydown = (e: any) => {
+    if (e.target.value.trim() && e.key === 'Enter') {
+      enterText()
+      e.target.blur()
+    }
+  }
   // 新增代码结束
 
   return (
@@ -153,7 +159,8 @@ export const RoomPage = () => {
             </div>
             <div className="chat" id="chat"></div>
             <div className="send">
-              <input type="text" className="input" id="entry" placeholder="Enter your message"/>
+              <input type="text" className="input" id="entry" placeholder="Enter your message"
+                     onKeyDown={event => handleKeydown(event)}/>
               <button className="chat-btn" onClick={enterText}>
                 Send
               </button>

example/src/index.css

@@ -222,7 +222,7 @@ a:hover {
 }
 
 .chat-area .send .input {
-  width: 100%;
+  flex: 1;
   padding: 5px 10px;
   font-size: 14px;
   color: #000;
@@ -232,8 +232,7 @@ a:hover {
 }
 
 .chat-btn {
-  white-space: nowrap;
-  width: 72px;
+  width: 62px;
   height: 38px;
   font-size: 14px;
   color: #000;