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

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

1 个答案: