如何使用DIV在Enter上提交表单

Question

我正试图弄清楚如何在充当输入的div内按下回车键时提交表单。有什么帮助吗？

这是我的密码。

const socket = new WebSocket("ws://localhost:5000");
const Chat = () => {

let divText = "";

const SendMessage = (event) => {
event.preventDefault();
console.log(divText);
divText = "";
}
const HandleChange = (event) => {

divText = event.target.textContent;
}
return (
<div className='chat-div'>
<div className='chat-box'>
<span className='razmak'></span>
</div>
<form className='input-form' onSubmit={SendMessage} spellCheck='false'>
<div className='chat-input' contentEditable='true' onInput={HandleChange}></div>
<button className='send-button' type='submit'><AiOutlineSend/></button>
</form>
</div>
)
}
export default Chat;

Answer 1

我要做的是更新您的div以使用onKeyDown，如下所示：

const socket = new WebSocket("ws://localhost:5000");
const Chat = () => {
let divText = "";
const sendMessage = (event) => {
alert("submit");
event.preventDefault();
console.log(divText);
divText = "";
};
const handleChange = (e) => {
divText = e.target.textContent;
if (e.key === "Enter") {
sendMessage(e);
}
};
return (
<div className="chat-div">
<div className="chat-box">
<span className="razmak"></span>
</div>
<form className="input-form" onSubmit={sendMessage} spellCheck="false">
<div
className="chat-input"
contentEditable="true"
onKeyDown={(e) => handleChange(e)}
></div>
<button className="send-button" type="submit">
jhgj
</button>
</form>
</div>
);
};
export default Chat;

还有其他一些东西，其中一些我没有包括在上面：

• 如果方法名称不返回JSX，则将其小写
• 理想情况下，divText应使用useStateReact挂钩
• 考虑使用标准输入而不是div，因为这在语义上更正确，并且对于使用屏幕阅读器的人来说是可以访问的