Javascript 在表单中呈现按钮[type="；submit"；]，触发onSubmit回调

使用

编辑

布尔状态，我有条件地在

表单

元素中呈现一个类型为

“submit”

的按钮。但是，您可以看到，当我将

edit

设置为

true

并呈现按钮时，

表单的
onSubmit
回调被触发：

导出默认函数App（）{
const[edit，setEdit]=React.useState（false）；
返回(
console.log（“提交”）}>
{编辑(
发送
) : (
setEdit（true）}>edit
)}
);
}


如果我使用
输入
而不是
按钮
，则不会发生这种情况：



知道发生这种情况的原因吗？
您可以编写此代码，以防止在重新渲染时默认提交

export default function App() {
const [edit, setEdit] = React.useState(false);

return (
<div className="App">
  <form
    onSubmit={(e) => {
      e.preventDefault();
      console.log("submit");
    }}
  >
    {edit ? (
      <button type="submit">send</button>
    ) : (
      <button onClick={() => setEdit(true)}>edit</button>
    )}
  </form>
 </div>
 );
}

导出默认函数App（）{
const[edit，setEdit]=React.useState（false）；
返回(
{
e、 预防默认值（）；
控制台日志（“提交”）；
}}
>
{编辑(
发送
) : (
setEdit（true）}>edit
)}
);
}
这与react/javascript没有太大关系，我建议使用一个不包含它们的示例。您看到的行为都在按钮文档中进行了解释：嗯，我认为它对面临react问题的人非常有用：/react在这里所做的就是将一个元素替换为另一个元素，那里的每个按钮都是标准的。没有类型的按钮是“提交”类型，当您单击“提交”按钮时，表单将提交。将按钮类型设置为“按钮”

默认值为“提交”