使用 React hooks 清除输入字段

Question

我正在构建一个实时聊天应用程序，但在清除输入字段时遇到问题。提交表单后，我希望清除输入字段。我将状态更改为空 sdtate 但根本不起作用。

import React, { useState, useEffect, useContext } from 'react'
import io from 'socket.io-client'
import './ChatRoom.css'
import { ChatContext } from '../ChatContext'
import ScrollToBottom from 'react-scroll-to-bottom'


const ChatRoom = () => {
    const { userName, setUserName } = useContext(ChatContext)
    const { roomCode, setRoomCode } = useContext(ChatContext)
    const [message, setMessage] = useState('')
    const [chats, setChats] = useState([])

    const handleMessage = (e) => {
        var newMessage = e.currentTarget.value
        // console.log(newMessage)
        setMessage(newMessage)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        console.log('Message submitted')
        setMessage("")
    }

    return (
        <>
            <div className="top-container">
                <h2>123</h2>
            </div>
            <div className="chat-container">
            {/* {renderChat()} */}
            <h1>hello</h1>
            </div>
            <form className="form-inline" onSubmit={handleSubmit}>
                <input type="text" onChange={handleMessage} className="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Type your message here..."/>
                <button type="submit" className="btn btn-primary mb-2">Send</button>
            </form>
        </>
        
    )
}


export default ChatRoom;

Answer 1

您\xe2\x80\x99正在使用不受控制的输入。尝试value={message}在输入上进行设置。

\n