I'm trying to figure out how to make my form submit when enter is pressed inside the div that is acting as input. Any help?
Here is my code.
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;
What I'd do is update your div to use an onKeyDown like this:
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;
There's a couple of other things, some which I've not included above:
divText should ideally use the useState React hook