Question

我正在尝试为我的 react js 应用程序创建一个弹出对话框，当用户单击按钮时，对话框打开。我在该对话框中有带有输入字段的表单，在用户填写所有输入后，他可以通过单击弹出对话框底部的“提交”按钮来提交信息。问题是我不知道如何将提交按钮粘贴到页脚，因此即使有 15 个以上的输入，用户也不必一直向下滚动才能看到“提交”按钮。我知道材质 ui 具有用于此目的的 DialogActions，但由于对话框位于父组件中，因此我无法从子组件访问 DialogActions。我的代码：


App.js (parent)

import React, { useState } from "react";

import Info from "./Info";
import Dialog from "@material-ui/core/Dialog";
import { DialogTitle } from "@material-ui/core";

import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";

import { DialogActions } from "@material-ui/core";

export default function App() {
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={handleClickOpen}>Click me to open dialog</button>
      <Dialog
        open={open}
        aria-labelledby="responsive-dialog-title"
        maxWidth="md"
        setMaxWidth="md"
        fullWidth={true}
      >
        <dialogContent>
          <dialogTitle>
            {" "}
            <div>
              <h4>Fill out the form</h4>
            </div>
          </dialogTitle>
          <DialogContentText>
            <Info />
          </DialogContentText>
        </dialogContent>
        {/* <DialogActions>
          <button id="responsive-dialog-title" onClick={handleClose}>
            {" "}
            Submit{" "}
          </button>
        </DialogActions> */}
      </Dialog>{" "}
    </div>
  );
}

和 Info.js（子）：

import React, { useState } from "react";

export default function Info() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleSubmit = () => {
    console.log(username);
    console.log(password);
    console.log(address);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          width: "350px",
          padding: "20px"
        }}
      >
        <label> Username</label>
        <input
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          type="text"
        />
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          width: "350px",
          padding: "20px"
        }}
      >
        <label> Password</label>
        <input
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          type="password"
        />
      </div>

      <button> Submit</button>
    </form>
  );
}

codesandbox

有什么办法可以让 Info.js 中的“提交”按钮显示为 DialogActions/ 固定到底部？非常感谢任何帮助和建议。

Answer 1

使用 position: fixed 属性来实现这一点。您的代码如下所示：

<form onSubmit={handleSubmit}>
  <div>
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        width: "350px",
        padding: "20px"
      }}
    >
      <label> Username</label>
      <input
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        type="text"
      />
    </div>
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        width: "350px",
        padding: "20px"
      }}
    >
      <label> Password</label>
      <input
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        type="password"
      />
    </div>
  </div>
  <div style={{ position: "fixed" }}>
    <button> Submit</button>
    <button> Cancel</button>
  </div>
</form>

对话框默认的滚动条也必须删除

<Dialog
    open={open}
    aria-labelledby="responsive-dialog-title"
    maxWidth="md"
    setMaxWidth="md"
    fullWidth={true}
  >
    <div style={{ overflow: "hidden", height: "100%", width: "100%" }}>
      <dialogTitle>
        {" "}
        <div>
          <h4>Fill out the form</h4>
        </div>
      </dialogTitle>
      <Info />
    </div>
  </Dialog>

这是可行的，但最好的办法是从父级调用提交函数，或者提交函数存在于父级中并且输入可以填充上下文或简单状态

如何在材质 ui 对话框的页脚中添加固定按钮？

1 个答案: