要单击图像图标，react-datepicker 的输入框不起作用答案

【问题标题】：To click on image-icon, of input box of react-datepicker are not working要单击图像图标，react-datepicker 的输入框不起作用
【发布时间】：2023-03-20 06:26:01
【问题描述】：

在 Pseudocode 中我正在使用我的 datePicker 的图像图标，它正在以动作打开。但是当我点击 IMAGE-icon 时，它的事件不会持续存在。

layerIndex 的问题，图像出现在输入框的顶部，所以在输入的改变时不会发生事件。

import DatePicker from 'react-datepicker'


rendor(){
return(
  <div className='country-code small-text label-text'> Repair Date</div>
  <DatePicker
    id='date-picker'
    calendarClassName='fullWidth'
    maxDate={moment()}
    dateFormat='MM/DD/YYYY'
    className='fullWidth'
    onChange={this.handleDatePick}
    isOpen={this.state.isOpen}
    placeholderText='Enter date'/>)
}

【问题讨论】：

标签： javascript datepicker react-datepicker

【解决方案1】：

可以将 onClick 图像图标作为函数事件。

我们只需要将ref attribute 中的函数传递给它。

import DatePicker from 'react-datepicker'

iconHandler = (c, name) => { window.isOpen = c }

rendor(){
return(
  <div className='country-code small-text label-text'> Repair Date</div>
  <DatePicker
    id='date-picker'
    calendarClassName='fullWidth'
    maxDate={moment()}
    dateFormat='MM/DD/YYYY'
    className='fullWidth'
    onChange={this.handleDatePick}
    isOpen={this.state.isOpen}
    ref={this.iconHandler}
    placeholderText='Enter date'/>)
}

【讨论】：