我尝试让用户在点击相应的按钮时进行滚动。我发现您可以使用React中的useRef
钩子来实现这一点。但是,当我按下左右滚动按钮时,它不起作用。当我控制台记录ref.current
时,我可以看到它正在抓取相应的div
。有人看到这里有什么问题吗?
const styles = () => ({
paper: {
padding: '25px',
borderRadius: '10px'
},
title: {
fontSize: '16px',
fontWeight: 'bold',
fontStyle: 'normal',
lineHeight: 3,
letterSpacing: 'normal',
textAlign: 'left',
},
container: {
height: '110px',
overflowX: 'scroll'
},
productItemsContainer: {
display: 'flex',
overflowX: 'scroll'
}
});
const relatedProducts = ({
classes, products
}) => {
const ref = useRef(null);
const scroll = (scrollOffset) => {
ref.current.scrollLeft += scrollOffset;
console.log(ref.current.scrollLeft);
console.log(ref.current);
};
return (
<Paper className={classes.paper}>
<Typography className={classes.title} gutterBottom>Discover Products</Typography>
<button onClick={() => scroll(-80)}>LEFT</button>
<button onClick={() => scroll(+80)}>RIGHT</button>
<Grid className={classes.container} container direction="column" >
<Grid item>
<div className={classes.productItemsContainer} ref={ref}>
{
products
.map((product) => {
return (
<RelatedProductItem key={product.item} product={product} />
);
})
}
</div>
</Grid>
</Grid>
</Paper>
);
};
当我检查从事件处理程序触发的日志时,我可以看到div
被抓取,而scrollLeft
仍然是0,并保持在0。
1条答案
按热度按时间8zzbczxx1#
Here is example link,它可以很好地与您的主逻辑一起工作。