1
我得到了第三方contactformcheck.js
,用於檢查聯繫表單。我下面的How to add external javascript file with reactjs第三方javascript在更改路由後未綁定到組件
因此建議,我改變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_\.-])[email protected][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_\.-])[email protected][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,然後檢查消失時,就會出現問題。實際上,當代碼正在工作時,鼠標光標將變爲塊符號,它將禁用按鈕單擊「發送消息」直到填充屬性。當它不工作時,鼠標光標可以點擊發送消息按鈕。
謝謝!由於'mousemove'不適用於大屏幕平板電腦用戶,因此我最終使用'DOMSubtreeModified'作爲操作類型。 –