Estoy tratando de descubrir cómo hacer que mi formulario se envíe cuando se presiona enter dentro del div que actúa como entrada. ¿Alguna ayuda?
Aquí está mi código.
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;Lo que haría es actualizar tu div para usar un onKeyDown como este:
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;Hay un par de otras cosas, algunas que no he incluido anteriormente:
divText debería usar el gancho useState React