为什么preventDefault（）不能在ReactJS中正常工作？

我有一个“加入”按钮：

const sendMessage=（e）=>{
如果（信息）{
emit（'send'，message，（）=>{setMessage（''）}）；
}
}
返回(
{
setMessage（e.target.value）；}
onKeyPress={（e）=>{returne e.key==='Enter'？sendMessage（e）：console.log（'nogood'）；}
/>
)

---

填写输入字段并按Enter键后，由于页面刷新，我的套接字io id发生更改。为了防止刷新，我在

sendMessage

函数中使用了

e.preventDefault（）

，但尽管如此，页面还是会刷新，套接字io id也会更改。如何防止页面刷新？

您的

输入

只会在

表单

中引起刷新，而您的示例不在该表单中。如果需要阻止表单刷新，可以在

onSubmit

中执行，如下例所示

import React, { useState } from "react";
    
export default function App() {
  const [message, setMessage] = useState("");

  function sendMessage(e) {
    console.log(e);
  }

  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input
          value={message}
          onChange={(e) => {
            setMessage(e.target.value);
          }}
          onKeyPress={(e) => {
            return e.key === "Enter" ? sendMessage(e) : console.log("no good");
          }}
        />
      </form>
    </div>
  );
}

import React，{useState}来自“React”；
导出默认函数App（）{
const[message，setMessage]=useState（“”）；
函数sendMessage（e）{
控制台日志（e）；
}
函数handleSubmit（e）{
e、 预防默认值（）；
}
返回(
{
设置消息（如目标值）；
}}
onKeyPress={（e）=>{
返回e.key==“回车”？发送消息（e）：console.log（“不好”）；
}}
/>
);
}

很抱歉，回复太晚。我按照上面显示的那样做了，但是套接字io id再次发生变化。您需要将套接字保持在一个稳定的引用中，如引用或上下文提供程序。好的，我试着这样做：在1:14:40。他只写了

e.preventDefault（）

，这对他来说是可行的，但对我来说不是。

import React, { useState } from "react";
    
export default function App() {
  const [message, setMessage] = useState("");

  function sendMessage(e) {
    console.log(e);
  }

  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input
          value={message}
          onChange={(e) => {
            setMessage(e.target.value);
          }}
          onKeyPress={(e) => {
            return e.key === "Enter" ? sendMessage(e) : console.log("no good");
          }}
        />
      </form>
    </div>
  );
}