相关疑难解决方法(0)

React - 检查元素在DOM中是否可见

我正在构建一个表单 - 用户在进入下一个屏幕之前需要回答的一系列问题(单选按钮).对于字段验证,我使用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)

javascript reactjs

18
推荐指数
6
解决办法
2万
查看次数

使用Reactjs获取滚动位置

我使用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'.

非常感谢.

javascript reactjs

13
推荐指数
6
解决办法
2万
查看次数

如何在 React.js 中检测页面滚动到顶部?

我有一个 UI 问题需要在 React 中解决。当用户开始滚动时,将在标题中添加一个背景类。滚动到页面顶部时,标题背景消失。

我已经弄清楚如何在滚动和修改状态时添加背景,但是如何检测用户何时滚动到页面顶部?

javascript reactjs

7
推荐指数
1
解决办法
1万
查看次数

标签 统计

javascript ×3

reactjs ×3