javascript - 为 react-day-picker 创建自定义组件输入

Question

我正在为 DayPickerInput 创建一个自定义材料 UI 组件，但问题是当onDayChange被触发时，它给出了一个错误。

handleToDateChange = (selectedDay, modifiers, dayPickerInput) => {
    const val = dayPickerInput.getInput().value;
}

Uncaught TypeError: Cannot read property 'value' of null

DayPickerInput 组件

 <DayPickerInput
      component={props => <DatePickerCustomInput {...props} />}
      value={toDate}
      placeholder=""
      formatDate={this.setDatePickerformatDate}
      onDayChange={this.handleToDateChange}
  />

DayPickerInput 自定义组件

class DatePickerCustomInput extends Component {
   render() {
       return (
           <TextField {...this.props}
               InputProps={{
                   startAdornment: (
                       <InputAdornment position="start">
                           <DateRange />
                       </InputAdornment>
                   ),
               }}

               value={this.props.value}
           />
       );
   }
}

重现问题：https ://codesandbox.io/s/387r9plx65

Answer 1

从这里的文档。该onDayChange方法的签名为

onDayChange (day: date, modifiers: Object, e: SyntheticEvent) ⇒ void

day是一个引用选择器中选定日期的日期对象。您无需从事件中提取值即可获取所选日期。

Answer 2

尝试这样做！

handleToDateChange = (selectedDay, modifiers, dayPickerInput) => {
    const val = dayPickerInput.state.value;
}