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

Question

我得到了第三方contactformcheck.js，用于检查联系表单。我下面的How to add external javascript file with reactjs

因此建议，我改变contactformcheck.js

代码从

$(document).ready(function(){ 

    $(function() { 

    if($('.form-check').length > 0) { 

     $('.form-check').each(function(){ 

      var form = $(this), 
       btn = form.find('.btn-submit'); 

      btn.addClass('disabled'); 

      // check form fields for valid or notempty inputs 
      function checkInput(){ 

       form.find('.required-field').each(function(){ 

        if($(this).hasClass('mailfield')) { 

         var mailfield = $(this); 
         var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i; 
         if(pattern.test(mailfield.val())){ 
          mailfield.removeClass('empty-field'); 
         } else { 
          mailfield.addClass('empty-field'); 
         } 

        } else if($(this).val() != '') { 

         $(this).removeClass('empty-field'); 

        } else { 

         $(this).addClass('empty-field'); 
        } 

       }); 
      } 

      // Highlight empty or not valid fields 
      function lightEmpty(){ 
       form.find('.empty-field').addClass('required-field-error'); 
       form.find('.empty-field').parents('.form-check-line').find('.required-field-error').css({'visibility':'visible'}); 
       setTimeout(function(){ 
        form.find('.empty-field').removeClass('required-field-error'); 
        form.find('.empty-field').parents('.form-check-line').find('.required-field-error').css({'visibility':'hidden'}); 
       },1000); 
      } 

      // 200ms form fields check 
      setInterval(function(){ 
       checkInput(); 
       var sizeEmpty = form.find('.empty-field').length; 
       if(sizeEmpty > 0){ 
        if(btn.hasClass('disabled')){ 
         return false 
        } else { 
         btn.addClass('disabled') 
        } 
       } else { 
        btn.removeClass('disabled') 
       } 
      },200); 

      // Button submit click 
      btn.click(function(){ 
       if($(this).hasClass('disabled')){ 
        lightEmpty(); 
        return false 
       } else { 
        form.submit(); 
        $('.send-success').fadeIn("300", "linear"); 
        form[0].reset(); 
        setTimeout(function(){$('.send-success').fadeOut("300", "linear");}, 3000); 
       } 
      }); 

     }); 

    } 

}); 

}); 

要

export function checkForm(){ 
if($('.form-check').length > 0) { 

    $('.form-check').each(function(){ 

     var form = $(this), 
      btn = form.find('.btn-submit'); 

     btn.addClass('disabled'); 

     // check form fields for valid or notempty inputs 
     function checkInput(){ 

      form.find('.required-field').each(function(){ 

       if($(this).hasClass('mailfield')) { 

        var mailfield = $(this); 
        var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i; 
        if(pattern.test(mailfield.val())){ 
         mailfield.removeClass('empty-field'); 
        } else { 
         mailfield.addClass('empty-field'); 
        } 

       } else if($(this).val() != '') { 

        $(this).removeClass('empty-field'); 

       } else { 

        $(this).addClass('empty-field'); 
       } 

      }); 
     } 

     // Highlight empty or not valid fields 
     function lightEmpty(){ 
      form.find('.empty-field').addClass('required-field-error'); 
      form.find('.empty-field').parents('.form-check-line').find('.required-field-error').css({'visibility':'visible'}); 
      setTimeout(function(){ 
       form.find('.empty-field').removeClass('required-field-error'); 
       form.find('.empty-field').parents('.form-check-line').find('.required-field-error').css({'visibility':'hidden'}); 
      },1000); 
     } 

     // 200ms form fields check 
     setInterval(function(){ 
      checkInput(); 
      var sizeEmpty = form.find('.empty-field').length; 
      if(sizeEmpty > 0){ 
       if(btn.hasClass('disabled')){ 
        return false 
       } else { 
        btn.addClass('disabled') 
       } 
      } else { 
       btn.removeClass('disabled') 
      } 
     },200); 

     // Button submit click 
     btn.click(function(){ 
      if($(this).hasClass('disabled')){ 
       lightEmpty(); 
       return false 
      } else { 
       form.submit(); 
       $('.send-success').fadeIn("300", "linear"); 
       form[0].reset(); 
       setTimeout(function(){$('.send-success').fadeOut("300", "linear");}, 3000); 
      } 
     }); 

    }); 

} 


} 

在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; 

上面的代码在我刷新/联系页面时效果很好。当我通过/ home等标头转到其他路线，然后返回/ contact，然后检查消失时，就会出现问题。实际上，当代码正在工作时，鼠标光标将变为块符号，它将禁用按钮单击“发送消息”直到填充属性。当它不工作时，鼠标光标可以点击发送消息按钮。

Answer 1

当您将路由更改回/联系人时，React JS实际上并未重新加载组件，这就是事件未绑定的原因，因为动作类型为window.addEventListener()中的“加载”componentDidMount()。

组件仅在加载页面时第一次绑定事件侦听器。尝试其他操作，例如可以解决您的问题的'mousemove'。