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

尝试执行此操作！

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

Answer 2

From the docs here。 onDayChange方法的签名为

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

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

创建用于react-day-picker的自定义组件输入

2 个答案: