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 = ["[email protected]", "[email protected]"];

    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您可以在Popper中添加disablePortal来解决此问题。
请注意，复制到剪贴板不是问题。问题是您无法在字段中选择文本（因为它在门户中）。

这是将disablePortal设置为true的沙箱链接-https://codesandbox.io/s/lxjwj3p8m9