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

customInput未在react-datepicker

1 个答案: