更改路由后第三方javascript未绑定到组件

我有一个第三方

contactformcheck.js

来检查联系人表单。我是按照这个建议来做的

因此，我更改了contactformcheck.js中的代码

import React from 'react';
import ContactInfo from './components/contactInfo';
import ContactForm from './components/contactForm';
import {checkForm} from '../../styles/js/contactformcheck'

class Contact extends React.Component {
  constructor(props) {
    super(props);
   this.handleLoad = this.handleLoad.bind(this);
   }

 componentDidMount() {
    window.addEventListener('load', this.handleLoad);
  }

  handleLoad() {
    checkForm()
  }

render() {
    return (
      <div className="b-page-content map-bg">
        <ContactInfo/>
        <ContactForm/>
      </div>
    );
  }
}

Contact.defaultProps = {
};

export default Contact;

从

到

在

Contact.js中

import React from 'react';
import ContactInfo from './components/contactInfo';
import ContactForm from './components/contactForm';
import {checkForm} from '../../styles/js/contactformcheck'

class Contact extends React.Component {
  constructor(props) {
    super(props);
   this.handleLoad = this.handleLoad.bind(this);
   }

 componentDidMount() {
    window.addEventListener('load', this.handleLoad);
  }

  handleLoad() {
    checkForm()
  }

render() {
    return (
      <div className="b-page-content map-bg">
        <ContactInfo/>
        <ContactForm/>
      </div>
    );
  }
}

Contact.defaultProps = {
};

export default Contact;

从“React”导入React；
从“/components/ContactInfo”导入ContactInfo；
从“./components/ContactForm”导入ContactForm；
从“../../styles/js/contactformcheck”导入{checkForm}
类Contact扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleLoad=this.handleLoad.bind（this）；
}
componentDidMount（）{
window.addEventListener（'load'，this.handleLoad）；
}
单担{
检查表（）
}
render（）{
返回(
);
}
}
Contact.defaultProps={
};
导出默认联系人；

---

当我在/contact刷新页面时，上面的代码运行良好。当我通过标头（如/home）转到另一个路由，然后返回到/contact时，问题就会出现，然后检查就消失了。事实上，当代码运行时，鼠标光标将成为一个块符号，它将禁用按钮单击“发送消息”，直到属性被填充。当它不工作时，鼠标光标能够单击发送消息按钮。

当您更改返回/contact的路由时，React JS实际上不会重新加载组件，这就是为什么事件不会绑定，因为在

窗口中操作类型为“load”。在
componentDidMount（）
中，addEventListener（）

---

该组件仅在第一次加载页面时绑定事件侦听器。尝试其他操作，如“mousemove”，它将解决您的问题。

谢谢！由于“mousemove”不适用于大屏幕平板电脑用户，因此我最终使用了

domsubtreemedited

作为动作类型。

import React from 'react';
import ContactInfo from './components/contactInfo';
import ContactForm from './components/contactForm';
import {checkForm} from '../../styles/js/contactformcheck'

class Contact extends React.Component {
  constructor(props) {
    super(props);
   this.handleLoad = this.handleLoad.bind(this);
   }

 componentDidMount() {
    window.addEventListener('load', this.handleLoad);
  }

  handleLoad() {
    checkForm()
  }

render() {
    return (
      <div className="b-page-content map-bg">
        <ContactInfo/>
        <ContactForm/>
      </div>
    );
  }
}

Contact.defaultProps = {
};

export default Contact;