Question

我这里有一个正在进行的项目，这是我目前正在处理的项目-我想根据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: [] });
            }
        }
    }

我非常感谢大家的预先输入！

ReactJS-从相同的日期到日期？

0 个答案: