大家好我在我的反应项目中使用Jquery验证器，但我不知道我应该在哪里实现验证器设置，现在它们在我的组件的componentDidMount中，这是打开添加元素的模式，我不认为每次打开模态对话框时定义它们是正确的，但我不知道我还能把它们放在哪里也可以验证开始日期＆lt; =结束日期是第一次运行...有人可以帮忙吗？
我的反应成分：
var ModalAddElement = React.createClass({displayName: "ModalAddElement",
getInitialState() {
return {
show: false,
items:this.props.items,
shouldValidate:false
};
},
componentDidMount() {
jQuery(document.body.children[0].children[0]).bind('mousewheel', function (e) {
var evt = window.event || e
evt = evt.originalEvent ? evt.originalEvent : evt;
var delta = evt.detail ? evt.detail * (-40) : evt.wheelDelta
if (delta > 0) {
this.value = parseInt(this.value) + 1;
}
else {
this.value = parseInt(this.value) - 1;
}
});
jQuery.validator.addMethod("validStartDate", function(value,element) {
if (moment(value, "MM/DD/YYYY", true).isValid()) {
return true;
}
else {
return false;
}
},' Enter valid date in format "mm/dd/yyyy" !');
jQuery.validator.addMethod("validEndDate", function(value,element) {
if (moment(value, "MM/DD/YYYY", true).isValid()) {
return true;
}
else {
return false;
}
},' Enter valid date in format "mm/dd/yyyy" !');
jQuery.validator.addMethod("checkEndDate",
function(value, element, params) {
var startDate = new Date($('#addStartDatePicker').val());
var endDate = new Date($('#addEndDatePicker').val());
if (startDate <= endDate || isNaN(startDate.getTime()) || isNaN(endDate.getTime())){
return true;
}
else{
return false;
}
},' End date should be equal or greater than start date !');
jQuery.validator.addMethod("checkStartDate",
function(value, element, params) {
var startDate = new Date($('#addStartDatePicker').val());
var endDate = new Date($('#addEndDatePicker').val());
if (startDate <= endDate || isNaN(startDate.getTime()) || isNaN(endDate.getTime())){
return true;
}
else{
return false;
}
},' Start date should be earlier or equal to end date !');
},
showModal() {
this.setState({show: true});
},
hideModal() {
this.setState({show: false});
},
handleStartDateValidation:function(){
if(this.state.shouldValidate) {
setTimeout(function () {
$('#addStartDatePicker').valid({
errorClass: 'error'
});
}.bind(this), 100);
}
},
handleEndDateValidation:function(){
if(this.state.shouldValidate) {
setTimeout(function () {
$('#addEndDatePicker').valid({
errorClass: 'error'
});
}.bind(this), 100);
}
},
handleWorkHoursValidation:function(){
if(this.state.shouldValidate) {
setTimeout(function () {
$('#addWorkHours').valid({
errorClass: 'error'
});
}.bind(this), 100);
}
},
fireStartDateDatepicker:function(){
$('#addStartDatePicker').datepick({
showAnim:''
})
},
fireEndDateDatepicker:function() {
$('#addEndDatePicker').datepick({
showAnim:''
});
},
addElement:function () {
var workHours = this.workHours.value;
var startDate = this.startDate.value;
var endDate = this.endDate.value;
var objectToAdd = {start:startDate,end:endDate,hours:workHours,selected:false};
var validOverlappingCheck = true;
this.setState({shouldValidate:true});
$('#addStartDatePicker').valid();
$('#addEndDatePicker').valid();
$('#addWorkHours').valid();
for(var i = 0;i<this.state.items.length;i++)
{
if (!(this.state.items[i].end < objectToAdd.start || objectToAdd.end < this.state.items[i].start)) {
validOverlappingCheck = false;
}
}
if( $('#addStartDatePicker').valid() && $('#addEndDatePicker').valid() && $('#addWorkHours').valid()) {
if (validOverlappingCheck) {
this.props.onAddElement(objectToAdd);
this.setState({shouldValidate: false});
this.setState({show: false});
}
else {
sweetAlert({
title: "",
text: "In order to merge your diaries after, they should not contain overlapping periods.Please enter different period.",
type: "warning"
});
return;
}
}
else {
return;
}
},
render : function(){
var close = () => this.setState({ show: false});
return (
<ReactBootstrap.ButtonToolbar>
<button className="myButton" onClick={() => this.setState({ show: true})}>Add period</button>
<ReactBootstrap.Modal show={this.state.show} onHide={this.hideModal} dialogClassName="custom-modal">
<form className="myForme" noValidate>
<ReactBootstrap.Modal.Header closeButton>
<ReactBootstrap.Modal.Title id="contained-modal-title-lg">Add period to diary</ReactBootstrap.Modal.Title>
<p>Date period should be valid e.g (start date should be less or equal to end date)</p>
</ReactBootstrap.Modal.Header>
<ReactBootstrap.Modal.Body>
<div>
<span>Enter Start Date: <span className="red">*</span> </span>
<input type="text" className="myDatepicker" id="addStartDatePicker" name="start" data-rule-checkStartDate="true" data-rule-validStartDate="true" onFocus={this.fireStartDateDatepicker} placeholder="mm/dd/yyyy" onBlur={this.handleStartDateValidation} ref={(ref) => this.startDate = ref} required></input>
</div>
<div>
<span>Enter End Date: <span className="red">*</span> </span>
<input type="text" className="myDatepicker2" id="addEndDatePicker" name="end" data-rule-validDate="true" data-rule-checkEndDate="true" data-rule-validEndDate="true" onFocus={this.fireEndDateDatepicker} placeholder="mm/dd/yyyy" onBlur={this.handleEndDateValidation} ref={(ref) => this.endDate = ref} required></input>
</div>
<div>
<span>Enter Work Hours: <span className="red">*</span> </span>
<input className="hoursInput" name="hours" id="addWorkHours" onInput={this.handleWorkHoursValidation} placeholder="0-60" onBlur={this.handleWorkHoursValidation} type="number" min="0" max="60" ref={(ref) => this.workHours = ref} required/>
</div>
</ReactBootstrap.Modal.Body>
<ReactBootstrap.Modal.Footer>
<span className="asteriskAlign"><span className="red">*</span> - required</span>
<ReactBootstrap.Button bsStyle="primary" onClick={this.addElement}>Add</ReactBootstrap.Button>
<ReactBootstrap.Button bsStyle="primary" onClick={this.hideModal}>Close</ReactBootstrap.Button>
</ReactBootstrap.Modal.Footer>
</form>
</ReactBootstrap.Modal>
</ReactBootstrap.ButtonToolbar>
);
}
});