Reactjs：如何在点击时将对话框移动到屏幕顶部

Question

当我点击一个可拖动的对话框时，我想移动到屏幕顶部。

我尝试过使用scrollTo(0, 0)，但这似乎对我的对话框没有任何作用。任何关于它的帮助，我怎样才能移动这个对话框。

提前非常感谢。 我正在关注这个 Move draggable objects to top of the screen or Div? 示例，但需要点击它。

    class Homepage extends Component {
      constructor(props) {
        super(props);
        this.state = {
          Pending:[],
          cancelled:[],
        }
        this.myRef = React.createRef();
      }
    
      componentDidMount() {
        this.myRef.current.scrollTo(0, 0);
      }
    
      componentDidUpdate(prevProps, prevState) {
        if(!prevProps.isModerator){
          if(prevProps.Permission === Permission && 
              this.props.Permission === Requested){
          }
        }
      }
    
      render() {
        const {allowRequest, classes} = this.props;
        const { Pending} = this.state;
        return (
            <>
              {Pending.map((user, index) => {
                return <Draggable bounds="parent" key={user.id} ref={this.myRef}>
                  <div className={classes["share-request-content"]} >
                    <Paper className="alert-container" square={true}>
                      <DialogTitle id="alert-title">
                        {/* Title here */}
                      </DialogTitle>
                      <DialogContent>
                      {/* Content here */}
                      </DialogContent>
                      <DialogActions className="dialog-action">
                        <Button autoFocus color="primary" onClick={() => allowRequest(user.id)}>
                          "Allow"
                        </Button>
                      </DialogActions>
                    </Paper>
                  </div>
                </Draggable>
              })
              }
            </>
        )
      }
    }
    
    Homepage.propTypes = {
      Permission: PropTypes.string,
      isModerator: PropTypes.bool.isRequired,
      Pending: PropTypes.array,
      cancelled: PropTypes.array,
    };
    
    export default withStyles(styles)(injectIntl(Homepage))

Answer 1

使用 position={{x:0, y:0}} 属性手动控制对话框的位置。

您可以在这里找到参考资料：https://github.com/STRML/react-draggable