我正在构建一个表单 - 用户在进入下一个屏幕之前需要回答的一系列问题(单选按钮).对于字段验证,我使用yup(npm包)和redux作为状态管理.
对于一个特定场景/组合,在用户可以继续之前,显示要求确认(复选框)的新屏幕(div).我只想在显示时应用此复选框的验证.
如何使用React检查DOM中是否显示元素(div)?
我想这样做的方法是将varibale'isScreenVisible'设置为false,如果满足条件,我会将状态更改为'true'.
我正在检查并在_renderScreen()中将'isScreenVisible'设置为true或false但由于某种原因它会进入无限循环.
我的代码:
class Component extends React.Component {
constructor(props) {
super(props);
this.state = {
formisValid: true,
errors: {},
isScreenVisible: false
}
this.FormValidator = new Validate();
this.FormValidator.setValidationSchema(this.getValidationSchema());
}
areThereErrors(errors) {
var key, er = false;
for(key in errors) {
if(errors[key]) {er = true}
}
return er;
}
getValidationSchema() {
return yup.object().shape({
TravelInsurance: yup.string().min(1).required("Please select an option"),
MobilePhoneInsurance: yup.string().min(1).required("Please select an option"),
Confirmation: yup.string().min(1).required("Please confirm"),
});
}
//values of form fields
getValidationObject() {
let openConfirmation = (this.props.store.Confirmation …Run Code Online (Sandbox Code Playgroud) 我使用reactjs并希望处理click事件滚动.
首先,我用以下内容列出了帖子componentDidMount.
其次,通过click event列表中的每个帖子,它将显示帖子详细信息并滚动到顶部(因为我将帖子详细信息放到页面的顶部位置).
第三,通过点击"close button"帖子详细信息,它将返回上一个帖子列表,但我希望网站将滚动到确切点击帖子的位置.
我用这样的:
点击事件查看帖子详细信息:
inSingle = (post, e) => {
this.setState({
post: post,
theposition: //How to get it here?
});
window.scrollTo(0, 0);
}
Run Code Online (Sandbox Code Playgroud)
我想获得状态theposition然后我可以完全滚动到点击帖子的位置'Close event'.
非常感谢.
我有一个 UI 问题需要在 React 中解决。当用户开始滚动时,将在标题中添加一个背景类。滚动到页面顶部时,标题背景消失。
我已经弄清楚如何在滚动和修改状态时添加背景,但是如何检测用户何时滚动到页面顶部?