更改路由后，第三方javascript不绑定到组件
更改路由后，第三方javascript不绑定到组件
提问于 2017-09-03 15:43:19
我有一个第三方的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;当我在/contact刷新页面时，上面的代码运行良好。当我通过报头(如/home )转到另一条路由，然后返回到/contact，然后检查就会发生问题。实际上，当代码正常工作时，鼠标光标将成为一个块符号，它会禁用“发送消息”按钮，直到填充属性为止。当它不工作时，鼠标光标可以点击发送消息的按钮。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-03 16:23:19
当您将路由更改回/contact时，React实际上不会重新加载组件，这就是为什么事件没有绑定，因为在window.addEventListener()中componentDidMount()中的操作类型是“load”。
组件仅在第一次加载页面时绑定事件侦听器。尝试其他的行动，如‘摩丝表情’，这将解决你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46025115
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号