选择日期时不会触发 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

无法重现错误，因为此代码有效

<div id='root'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<script type="text/babel">
    var HelloMessage = React.createClass({
        componentDidMount:function(){
            $("#datepicker").datepicker();
        },
        onBlur: function(){
            console.log("a");
        },
        render: function () {
            return <input type="text" id="datepicker" onBlur={this.onBlur}/>
        }
    });
    ReactDOM.render(<HelloMessage/>, document.getElementById('root'));
</script>

Answer 2

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

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

选择日期时不会触发 React onBlur

React onBlur is not triggered when choosing date

javascript

jquery

datetimepicker

onblur

reactjs