javascript - 选择日期时不会触发 React onBlur

Question

我在 React 中使用 jQuery datetimepicker 插件来创建日期时间选择器，例如 example

现在，我想在 onBlur() 事件中实现验证，以检查开始日期是否 > 结束日期。

我已经实现了。如果开始时间 > 结束时间，它会将结束时间重置为相同的开始时间。

但是，它只能通过键入来工作。如果我从 jquery UI 选择日期，则不会触发 onBlur() 事件。

谁能告诉我问题出在哪里？谢谢。

<div id={id}>
    <span className='from'>
        <input
            type='text' id={id+'-from'}
            ref='dateFrom'
            onChange={this.handleChange}
            onBlur={this.handleBlur}
            value={value.from} />
    </span>
    <span className='to'>
        <input
            type='text' id={id+'-to'}
            ref='dateTo'
            onChange={this.handleChange}
            onBlur={this.handleBlur}
            value={value.to} />
    </span>
</div>


getInitialState() {
    let prevFrom = ''
    let prevTo = ''

    prevFrom = '2016-12-12'
    prevTo = '2016-12-19'

    return {
        prevFrom,
        prevTo
    }
},
handleChange(evt) {
    let {onChange} = this.props

    let isValidFrom = this.isDateValid(this.dateFrom.value)
    let isValidTo = this.isDateValid(this.dateTo.value)

    if (!isValidFrom) {
        let errMsg = this.handleErrMsg()
        showError(errMsg);
    }

    if (!isValidTo) {
        let errMsg = this.handleErrMsg()
        showError(errMsg);
    }

    onChange({from:this.dateFrom.value, to:this.dateTo.value})
},
handleBlur() {
    let {onChange} = this.props
    let dateFrom = this.dateFrom.value
    let dateTo = this.dateTo.value

    let isValidFrom = this.isDateValid(dateFrom)
    let isValidTo = this.isDateValid(dateTo)
    let isAfter = false

    // Validate the date-time when leave the input
    // If not valid, reset to the previous valid value
    if (!isValidFrom) {
        dateFrom = this.state.prevFrom
        this.dateFrom.value = dateFrom
    }

    if (!isValidTo) {
        dateTo = this.state.prevTo
        this.dateTo.value = dateTo
    }

    // validating the start time > end time
    isAfter = Moment(dateFrom).isAfter(dateTo)

    // Determine the start time is after end time or not;
    // if so, change start time & end time the same
    if (isAfter && isValidFrom) {
        onChange({from:dateFrom, to:dateFrom})
        this.setState({
            prevFrom: dateFrom,
            prevTo: dateFrom
        })
    }
    else if (!isAfter && isValidFrom && isValidTo) {
        onChange({from:dateFrom, to:dateTo})
        this.setState({
            prevFrom: dateFrom,
            prevTo: dateTo
        })
    }
    else {
        onChange({from:this.state.prevFrom, to:this.state.prevTo})
    }
}

Answer 1

在您提供的示例页面上测试日期时间选择器后，我注意到在我使用时间选择器更改时间后输入失去了焦点。这可能就是 onBlur 事件未被触发的原因。相反，您可以尝试向日期时间选择器提供一个 onClose 事件。

$('#my-datetimepicker').datetimepicker({
    onClose: function(dateText, inst) {
        console.log('validate here');
    }
});