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=""/>}
      />
    );
  }
}