我如何才能得到这个转盘的可点击的自定义点,我不能在列表项中绑定一个点击事件来移动转盘。我需要一个适当的实现 onClick
和 li
在旋转木马中点击上一个和下一个项目。
以下是链接中的完整代码 密码盒
const CustomDot = ({onMove,index,onClick,active}) => {
return (
<ol class="carousel-indicators">
<li data-target="#main-slide" data-slide-to="0" className={active ? "active" : "inactive"}
>How t bind the click event list item
onClick={() => onClick()}>{React.Children.slide1}</li>
<li data-target="#main-slide" data-slide-to="1" className={active ? "active" : "inactive"}
onClick={() => onClick()}>{React.Children.slide2} </li>
<li data-target="#main-slide" data-slide-to="2" className={active ? "active" : "inactive"}
onClick={() => onClick()}>{React.Children.slide3} </li>
</ol>
);
};
问题是插件期望接收一个 单元 (li
例如)作为 CusomtDot
但你通过一个列表(ol
与一些子女)。)
解决方案,传递一个单一元素,像这样。
const CustomDot = ({ onMove, index, onClick, active }) => {
// onMove means if dragging or swiping in progress.
// active is provided by this lib for checking if the item is active or not.
return (
<li
className={active ? "active" : "inactive"}
onClick={() => onClick()}
>
{index + 1}
</li>
);
};
工作演示: https:/codesandbox.iosreact-multi-carousel-customdot-jwkfo。
const CustomDot = ({ onMove, index, onClick, active }) => {
return (
<li
className={active ? "active" : "inactive"}
onClick={() => onClick()}
>
<MaximizeIcon />
</li>
);
};
const arrowStyle = {
background: "transparent",
border: 0,
color: "#fff",
fontSize: "80px"
};
const CustomRight = ({ onClick }) => (
<button className="arrow right" onClick={onClick} style={arrowStyle}>
<ArrowForwardIcon style={{ fontSize: "50px" }} />
</button>
);
const CustomLeft = ({ onClick }) => (
<button className="arrow left" onClick={onClick} style={arrowStyle}>
<ArrowBackIcon style={{ fontSize: "50px" }} />
</button>
);
工作演示。 https:/codesandbox.iosreact-multi-carousel-customdot-3q0f4?file=srcApp.js:683-1052。