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

Posted 2023-02-16

【中文标题】单击发送消息后如何重置输入字段

【英文标题】：How do I reset the input field after clicking to send my message

【发布时间】：2021-01-20 22:44:12

【问题描述】：

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

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>

【问题讨论】：

提交成功后可以在提交函数中设置消息吗？即setMessage('')。还是您需要更高级的东西？

做到了，比想象的要简单。谢谢

【参考方案1】：

只是我评论的跟进，因此可以将其标记为已回答。我将尝试更详细地解释一下，以便有类似问题的任何人都可能会发现答案更有用。

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

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

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

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

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

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