React Datepicker - 当我绑定启用 e.preventDefault() 时显示错误的日期

Question

日期选择器正在检测正确的日期，但表单正在刷新。

所以，我在函数中插入了 e.preventDefault()。

这给了我一个错误，说 e.preventDefault() 不是函数。

所以我把函数改为使用bind

onChange={(event)=> this.changeStartDetails.bind(this)}

但是现在，无论我 select 是什么日期，datePicker 都会将其注册为今天午夜。

我哪里错了？

完整代码在这里

摘要代码如下：

  constructor(){
        super()
        this.changeStartDetails= this.changeStartDetails.bind(this)
        } 

changeStartDetails(e){

   e.preventDefault()

    console.log('e', e)
    console.log('moment(e)', moment(e).format('DD MM YY HH:mm'))
    console.log('moment()', moment().format('DD MM YY HH:mm'));
    console.log('!moment(e).isAfter(moment())', !moment(e).isAfter(moment()));
}

   <form>

            <DatePicker
                className="datePicker"
                timeIntervals={15}
                selected={this.state.startDetails}
                onChange={(event)=> this.changeStartDetails.bind(this)}
                showTimeSelect
                dateFormat="d MMM yyyy HH:mm"
                required
                placeholderText={'Date & Time Event Starts'}
            />

    </form>

Answer 1

你错了，

onChange={(event)=> this.changeStartDetails.bind(this)}

您错误地绑定了事件侦听器并且还调用了回调函数。

你的意思可能是这样的，

onChange={this.changeStartDetails.bind(this)}

或者，

onChange={event => this.changeStartDetails(event)}

编辑：在这个测试中一切正常，也没有任何形式刷新。

function App() {
    const [sdate, setSDate] = useState(new Date());
    return (
        <div className="App">
            <DatePicker
                className="datePicker"
                timeIntervals={15}
                selected={sdate}
                onChange={(event) => {
                    console.log('onChange', event);
                    setSDate(event);
                }}
                showTimeSelect
                dateFormat="d MMM yyyy HH:mm"
                required
                placeholderText={'Date & Time Event Starts'}
            />
        </div>
    );
}

React Datepicker - 当我绑定启用 e.preventDefault() 时显示错误的日期

React Datepicker - wrong date showing when I bind to enable e.preventDefault()

forms

bind

datepicker

reactjs