javascript - customInput 未在 react-datepicker 中返回所选日期

Question

我正在尝试单击图标打开react-datepicker 。为此，我正在使用customInput参数。react-datepicker在单击图标时打开，但onChange处理程序未获取所选日期。这是我的代码：

<div className="date-icon">
    <DatePicker
        id="date-picker"
        dateFormat="YYYY-MM-DD"
        selected={this.state.startDate}
        showMonthDropdown
        onChange={this.handleDateChange.bind(this)}
        customInput={<img src="/img/cal.svg" alt=""/>}
        //includeDates={this.state.activityDates}
    />
    <br/>
 </div>

这是handleDateChange函数

handleDateChange(date, event){
    console.log(document.getElementById("date-picker").value)
}

我正在获取undefined控制台日志。

当我删除该customInput参数时，日期会按预期打印在控制台中。

Answer 1

默认输入是一个input元素，它有一个value. 您的自定义输入<img src="/img/cal.svg" alt=""/>不是输入元素，并且没有value.

您可以改为将给定的时刻存储在onChange处理程序中并将其存储在状态中并改为使用它。

例子

class App extends React.Component {
  state = { selectedDate: moment() };

  handleDateChange = m => {
    this.setState({ selectedDate: m });
    console.log(m.format("YYYY-MM-DD"));
  };

  render() {
    return (
      <DatePicker
        id="date-picker"
        dateFormat="YYYY-MM-DD"
        selected={this.state.selectedDate}
        showMonthDropdown
        onChange={this.handleDateChange}
        customInput={<img src="/img/cal.svg" alt=""/>}
      />
    );
  }
}