我这里有一个正在进行的项目,这是我目前正在处理的项目-我想根据DATETIME RANGE根据事件的给定当前约会时间来过滤事件。这是它的屏幕截图:
当前,我可以按表中的前三个字段进行过滤,但是我也希望能够过滤具有日期时间范围的第四个字段。这是我正在考虑使用的表单输入:
<th style={{ width: '20%' }}>
<input type="datetime-local" style={{ width: '50%' }}
className="form-control" value={this.state.StartTime}
onChange={this.handleStartTimeChange}
/>
<input type="datetime-local" style={{ width: '50%' }}
className="form-control" value={this.state.EndTime}
onChange={this.handleStartTimeChange}
/>
</th>
我有点希望让它们由同一个函数处理,该函数会将这些值配对在一起,并使用该值传递给父过滤器函数。这是当前的OnChange处理程序代码:
handleStartTimeChange(e) {
this.setState({ StartTime: e.target.value }, this.handleTicketFilter("currentApptTime", e.target.value));
}
handleEndTimeChange(e) {
this.setState({ EndTime: e.target.value }, this.handleTicketFilter("currentApptTime", e.target.value));
}
最后,这是我当前的函数,正在将其他数据传递给父过滤器函数:
handleTicketFilter(col,inpt) {
//console.log("Col is: " + col + " Inpt is: " + inpt);
const clm = col;
const ipt = inpt;
this.props.filterTix({ collection: this.props.biTicketType, column: clm, input: ipt });
}
我应该尝试创建两个过滤功能,以便datetime有自己的过滤逻辑,可以通过吗?确保对集合适当过滤日期时间输入的最佳方法是什么?
附录-这是父级过滤器功能本身,适用于您在上图中看到的字段:
filterTickets(data) {
//console.log("Collection is: " + collection + " Column is: " + column + " Input is " + input);
var parts = Object.values(data);
console.log(parts);
var collection = parts[0];
var column = parts[1];
var input = parts[2];
console.log("Input is: " + input);
var currUser = this.userState.data;
var currOpen = this.state.data;
console.log(currOpen);
var currCloses = this.state.closedData;
console.log("Current closed collection to filter: " + currCloses);
var myTix = this.state.selectedData.filter(x => x.userOwnerId == currUser.userId);
var myCloseTix = this.state.selClosedData.filter(x => x.userOwnerId == currUser.userId);
var matchedTix = [];
//console.log(JSON.stringify(myTix));
if (input && input != '') {
if (JSON.stringify(this.state.selectedData) == JSON.stringify(myTix) || JSON.stringify(this.state.selClosedData) == JSON.stringify(myCloseTix)) {
//TODO: implement functionality of users searching their own tickets when their own filter has been selected
}
else {
//owner data will need to be handled in its own special way, since it's actually by userId
//same with apptDateTime apparently
if (column != 'Owner' && column != "currentApptTime") {
//if it's coming from the open ticket table, filter that collection
if (collection == 'open') {
//var filter = currOpen.filter(x => x[column].indexOf(input) >= 0);
console.log(currOpen);
matchedTix = currOpen.filter(ticket => { var ticketVal = String(ticket[column]); return ticketVal.includes(input) });
this.setState({ selectedData: matchedTix, filSelData: matchedTix });
}
//otherwise filter the closed collection
else {
matchedTix = currCloses.filter(ticket => { var ticketVal = String(ticket[column]); return ticketVal.includes(input) });
console.log("Closed matches: " + matchedTix);
this.setState({ selClosedData: matchedTix, filSelClosedData: matchedTix });
}
}
}
}
else {
if (collection == 'open') {
this.setState({ selectedData: currOpen, filSelData: [] });
}
else {
this.setState({ selClosedData: currCloses, filSelClosedData: [] });
}
}
}
我非常感谢大家的预先输入!