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

Question

在伪代码中，我正在使用我的 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'/>)
}

Answer 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'/>)
}