在聊天应用程序中，我想重置（）输入字段，以便在单击时向其发送消息，因此输入字段将再次变为空。这就是我所拥有的。
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>
只是我评论的跟进内容，因此可以将其标记为已回答。我将尝试更详细地解释，以便有类似问题的任何人都可以找到答案更有用。
在输入上使用值道具意味着它是“受控的”。
这意味着您提供给值道具的内容将出现在输入中。
因此，在这种情况下，更改出现在输入中的值就像更改用于值prop的变量一样简单message。
message通过useState正确的更新方式创建的as使用的是相应的setState方法，在这种情况下为setMessage。上面的onChange事件中的代码段中已经使用了此功能，以在用户输入数据时setMessage(e.currentTarget.value);处理更新message。
通过setMessage('');在submit功能末尾添加用于操作表格的功能，可以实现没有特殊逻辑的基本复位。
const submit = (event) => {
event.preventDefault();
socket.emit('text-message', message);
setMessage('');
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句