对话框没有点击 onClick 事件

Question

我将以下代码用作教程：

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;

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

Answer 1

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

您可以通过分叉 Sandbox 来跟进。

因此，您可以通过两种不同的方式解决问题。

1 删除“type=submit”

const CommentSend = () => {
  // ... redacted for brevity    
  return (
    <form>
      <Button
        onClick={e => {
          setOpen(true);
        }}
      >
        Add Comment
      </Button>
      <Dialog open={open}>
         // ... redacted for brevity
      </Dialog>
    </form>
  );
};

查看下面的工作演示。

2 防止默认按钮单击事件。

 <Button
    onClick={e => {
      e.preventDefault();
      setOpen(true);
    }}
    type="submit"
  >

如果您需要保留按钮的type="submit"，您可以使用传递给“onClick”回调的事件并调用.preventDefault() 来阻止刷新。