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

Question

我试图弄清楚如何在充当输入的 div 中按下 enter 时让我的表单提交。 有什么帮助吗？

这是我的代码。

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最好使用useState React hook
• 考虑使用标准输入而不是 div，因为这在语义上更正确，并且使用屏幕阅读器的人可以访问。