javascript - 无法从 Material-UI 中 Dialogue 中的 Popper 复制到剪贴板
问题描述
在此处重现错误的步骤:(尝试在 Firefox 中打开,我几乎崩溃了 chrome:P)https://codesandbox.io/s/73z5293391
- 点击
OPEN SIMPLE DIALOGUE
按钮。现在您会看到一个对话框,单击TOGGLE POPPER
按钮。 - 现在你会看到一个 Popper,它有一个输入框和一个 COPY 按钮。
- 在这种情况下,您需要复制输入框内的文本
hello
。
所以我实际上无法复制到剪贴板。首先我认为这可能是一个问题Dialogue
。但不是。在Dialogue
它工作。但不适用于从弹出的Dialogue
Popper(仅适用于 Popper 也有效)。在这种情况下,你能帮我复制到剪贴板吗?
再次是源代码:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Avatar from "@material-ui/core/Avatar";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemText from "@material-ui/core/ListItemText";
import DialogTitle from "@material-ui/core/DialogTitle";
import Dialog from "@material-ui/core/Dialog";
import PersonIcon from "@material-ui/icons/Person";
import AddIcon from "@material-ui/icons/Add";
import Typography from "@material-ui/core/Typography";
import blue from "@material-ui/core/colors/blue";
import DialogContent from "@material-ui/core/DialogContent";
import Popper from "@material-ui/core/Popper";
const emails = ["username@gmail.com", "user02@gmail.com"];
const styles = {
avatar: {
backgroundColor: blue[100],
color: blue[600]
}
};
class SimpleDialog extends React.Component {
state = {
anchorEl: null,
openPopper: false
};
handleClose = () => {
this.props.onClose(this.props.selectedValue);
};
handleListItemClick = value => {
this.props.onClose(value);
};
copytoClipBoard = () => {
this.hello.select();
try {
return document.execCommand("copy");
} catch (err) {
console.log("Oops, unable to copy");
}
};
handleClick = event => {
const { currentTarget } = event;
this.setState(state => ({
anchorEl: currentTarget,
openPopper: !state.openPopper
}));
};
render() {
const { classes, onClose, selectedValue, ...other } = this.props;
const { anchorEl, openPopper } = this.state;
const id = openPopper ? "simple-popper" : null;
return (
<Dialog
onClose={this.handleClose}
aria-labelledby="simple-dialog-title"
{...other}
>
<DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
<DialogContent>
<Button
aria-describedby={id}
variant="contained"
onClick={this.handleClick}
>
Toggle Popper
</Button>
<Popper
id={id}
open={openPopper}
anchorEl={anchorEl}
style={{ zIndex: 10000 }}
>
<input
value="hello"
readOnly
type="text"
ref={node => (this.hello = node)}
/>
<Button onClick={this.copytoClipBoard}> Copy </Button>
</Popper>
<List>
{emails.map(email => (
<ListItem
button
onClick={() => this.handleListItemClick(email)}
key={email}
>
<ListItemAvatar>
<Avatar className={classes.avatar}>
<PersonIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={email} />
</ListItem>
))}
<ListItem
button
onClick={() => this.handleListItemClick("addAccount")}
>
<ListItemAvatar>
<Avatar>
<AddIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="add account" />
</ListItem>
</List>
</DialogContent>
</Dialog>
);
}
}
SimpleDialog.propTypes = {
classes: PropTypes.object.isRequired,
onClose: PropTypes.func,
selectedValue: PropTypes.string
};
const SimpleDialogWrapped = withStyles(styles)(SimpleDialog);
class SimpleDialogDemo extends React.Component {
state = {
open: false,
selectedValue: emails[1]
};
handleClickOpen = () => {
this.setState({
open: true
});
};
handleClose = value => {
this.setState({ selectedValue: value, open: false });
};
render() {
return (
<div>
<Typography variant="subtitle1">
Selected: {this.state.selectedValue}
</Typography>
<br />
<Button
variant="outlined"
color="primary"
onClick={this.handleClickOpen}
>
Open simple dialog
</Button>
<SimpleDialogWrapped
selectedValue={this.state.selectedValue}
open={this.state.open}
onClose={this.handleClose}
/>
</div>
);
}
}
export default SimpleDialogDemo;
解决方案
@akhila-hegde 您可以添加disablePortal
到 Popper 来解决这个问题。请注意,问题不在于复制到剪贴板。问题是您无法选择字段中的文本(因为它位于门户中)。
这是将 disablePortal 设置为 true 的沙盒链接 - https://codesandbox.io/s/lxjwj3p8m9
推荐阅读
- r - ggplot2:如何根据 bin 范围为直方图中的特定 bin 着色
- laravel - Laravel-如何随机选择
- xcode - UISearchController & Segue
- swift - 使用 AVPlayer 在直播中向前/向后跳过 X 秒?
- c++ - 使用clang格式时,如何在行大时将右括号分成新行?
- javascript - Firebase 身份验证令牌的默认持久时间是多少?
- flutter - 如何使用飞镖中的函数初始化类的字段?
- plot - x 和 y 轴在 GNU Octave 中的 scatter3 图中互换
- javascript - 表单验证中的 JavaScript sessionStorage
- javascript - React Native Expo - 网络 | 意外的标记