如何解决Reactjs:单击时如何将对话框移到屏幕顶部
当我单击可拖动对话框时,我想移至屏幕顶部。
我尝试使用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))
解决方法
使用position = {{{x:0,y:0}}属性来手动控制对话框的位置。
您可以在此处找到参考:https://github.com/STRML/react-draggable
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。