Question

在聊天应用程序中，我想重置（）单击时发送消息的输入字段，以便输入字段再次变空。这是我所拥有的。

const [message, setMessage] = useState(""); 
const [messages, setMessages] = useState([]);

const submit = (event) => {
event.preventDefault();
socket.emit("text-message", message);
    };

<form onSubmit={submit} id="form">
    <div className="input-group">
        <input
            name="message"
            maxLength="60"
            type="text"
            placeholder="Message"
            className="form-control"
            onChange={(e) => {
            setMessage(e.currentTarget.value);
             }} 
            value={message}
            id="text"
            />
     <button id="send" type="submit" className="btn btn-primary">
        Send
     </button>
  </div>
</form>

Answer 1

只需对我的评论进行跟进，即可将其标记为已回答。我将尝试更详细地解释一下，以便遇到类似问题的任何人都可以找到更有用的答案。

在输入上使用 value 属性意味着它是“Controlled”。

这意味着您提供给 value prop 的内容将出现在输入中。

因此，更改出现在输入中的值就像更改用于 value 属性的变量一样简单，在本例中为 message。

由于 message 是由 useState 创建的，因此更新它的正确方法是使用相应的 setState 方法，在本例中为 setMessage。这已在上面的 onChange 事件 setMessage(e.currentTarget.value); 片段中使用，以在用户输入数据时处理更新 message。

使用 setMessage(''); 添加到用于操作表单的 submit 函数的末尾，可以实现没有特殊逻辑的基本重置。

const submit = (event) => {
    event.preventDefault();
    socket.emit('text-message', message);
    setMessage('');
};

单击发送消息后如何重置输入字段

1 个答案: