我试图做的是阻止 react 应用程序中表单的默认状态，在移动视图中默认拉动刷新是存在的， 因此，如果我不小心拉动刷新我的页面(表单组件(，整个表单值将被重置。有没有办法防止该组件拉取刷新，我尝试使用 onTouchMove 方法并尝试调用 event.preventDefault((， 但是onTouchMove方法没有触发，如果还有其他方法可以解决此问题，请告诉我，提前感谢！
'
class SwipeTest extends React.Component {
constructor(props) {
super(props);
this.state = {
startX: 0,
startY: 0,
currentX: 0,
currentY: 0,
direction: 'none',
threshold: 150,
}
}
touchStart(e) {
alert("i am in touchStart")
}
touchMove(e) {
alert("i am in touchMove")
}
touchEnd(e)
{
alert("i am in touchEnd")
}
render() {
return (
<div
className="w-100 bg-blue db pa4"
onTouchStart={this.touchStart.bind(this)}
onTouchMove={this.touchMove.bind(this)}
onTouchEnd={this.touchEnd.bind(this)}
>
Swipe me (up or down)
</div>
)
}
}
window.onload = () => {
ReactDOM.render(
<SwipeTest />,
document.getElementById("main")
);
};
'
我对你的问题很好奇，所以我用谷歌搜索了一个解决方案。我发现的那个基本上在你的内容周围创建了一个包装器，并且具有更高的z索引捕获pull event并防止它到达你的浏览器。
.body,
.wrapper {
/* Break the flow */
position: absolute;
top: 0px;
/* Give them all the available space */
width: 100%;
height: 100%;
/* Remove the margins if any */
margin: 0;
/* Allow them to scroll down the document */
overflow-y: hidden;
}
.body {
/* Sending body at the bottom of the stack */
z-index: 1;
}
.wrapper {
/* Making the wrapper stack above the body */
z-index: 2;
}
<!doctype html>
<html>
<head>
<!-- Put the above styles here -->
</head>
<body class="body">
<div class="wrapper">
<!-- Your content goes here -->
<div id="root" />
</div>
</body>
</html>
这是想法的来源： https://w3bits.com/prevent-chrome-pull-to-refresh-css/