Reactjs 对话框不显示'；t单击onClick事件

我将以下代码用作教程：

CommentSend.js

import React, { useState } from "react";
import Dialog from "@material-ui/core/Dialog";
import FormControl from "@material-ui/core/FormControl";
import Button from "@material-ui/core/Button";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";

const CommentSend = () => {
  const [description, setDescription] = useState("");
  const [open, setOpen] = useState(false)

  return (                                 
              <form>                                    
                  <Button            
                    onClick={() => setOpen(true)}        
                    type="submit"    
                  >
                      Add Comment
                  </Button>
                  <Dialog
                    open={open}
                  >
                    <FormControl fullWidth>
                      <InputLabel htmlFor="comment">Comment</InputLabel>
                      <Input
                        id="comment"
                        onChange={event => setDescription(event.target.value)}
                      />                      
                    </FormControl>
                  </Dialog>
              </form>
          );}

export default CommentSend;

import React，{useState}来自“React”；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/FormControl”导入FormControl；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Input”导入输入；
从“@material ui/core/InputLabel”导入InputLabel；
const CommentSend=（）=>{
const[description，setDescription]=useState（“”）；
const[open，setOpen]=useState（false）
报税表（
setOpen（真）}
type=“提交”
>
添加注释
评论
setDescription（event.target.value）}
/>                      
);}
导出默认评论发送；

---

单击按钮后，对话框不会打开，而是刷新页面。我不确定这里发生了什么。

页面正在刷新，因为按钮的类型是“提交”，这会触发页面刷新

你可以通过分叉沙箱来跟进。

所以你可以用两种不同的方式来解决这个问题

1删除“类型=提交”

const CommentSend=（）=>{
//…为了简洁而编辑
返回(
{
setOpen（真）；
}}
>
添加注释
//…为了简洁而编辑
);
};

查看下面的工作演示。

2防止默认的按钮点击事件。

{
e、 预防默认值（）；
setOpen（真）；
}}
type=“提交”
>

如果需要保留按钮的

type=“submit”

，可以使用传递给“onClick”回调的事件阻止刷新，并调用

.preventDefault（）

---

您的按钮类型为

submit

，这意味着当您单击它时，表单将被提交。表单提交，提交网页（又名页面刷新）。相反，为按钮指定不同的类型（如

伟大的答案和解释！如果按钮的目的不是提交，您也可以将按钮类型更改为submit以外的其他类型。但这只是一个小小的吹毛求疵点哈哈：D+1Great catch@JohnRuddell用
type=“button”显式表示
出于可访问性的原因，最好是放弃或离开“type='submit'”-