如何解决如何在材质 ui 对话框的页脚中添加固定按钮?
我正在尝试为我的 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",padding: "20px"
}}
>
<label> Password</label>
<input
value={password}
onChange={(e) => setPassword(e.target.value)}
type="password"
/>
</div>
<button> Submit</button>
</form>
);
}
有什么办法可以让 Info.js 中的“提交”按钮显示为 DialogActions/ 固定到底部?非常感谢任何帮助和建议。
解决方法
使用 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",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>
这是可行的,但最好的办法是从父级调用提交函数,或者提交函数存在于父级中并且输入可以填充上下文或简单状态
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。