日期选择器e.target.value未定义

时间:2019-01-06 02:15:37

标签: javascript reactjs

我将Datepicker组件用于日历,以使用用户选择的日期更新状态。

当我尝试使用输入React更改默认日期时,输出错误:“ TypeError:e.target未定义”。

谢谢。

状态:

this.handleSubmit = this.handleSubmit.bind(this);
this.handleDate = this.handleDate.bind(this);
this.handleGuests = this.handleGuests.bind(this);
this.handleName = this.handleName.bind(this);
this.state = {
  min: new Date().getHours,
  max: new Date(),
  booking: {
    date: new Date(),
    people: 1,
    name: 'John Doe',
  },
}

handleDate函数:

handleDate(e){
const booking = {...this.state.booking}
booking.date = e.target.value;
this.setState({booking});
}

日期选择器:

<DatePicker
            name="Datepicker"
            className="form-control mx-auto form-control-lg p-3"
            selected={this.state.booking.date}
            onChange={this.handleDate}
            showTimeSelect
            timeFormat="HH:mm"
            timeIntervals={60}               
            dateFormat="MMMM dd, yyyy h:mm aa"
            timeCaption="Time"
            placeholderText="Click and choose the date"
          />

1 个答案:

答案 0 :(得分:0)

来自自述文件的日期选择器组件:

https://github.com/Hacker0x01/reactdatepicker/blob/master/README.md#installation

回调不使用事件,它已经在handleChange函数的参数中包含date对象。

handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  render() {
    return (
      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
      />
    );
  }