为反应日选择器创建自定义组件输入

Question

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

handleToDateChange = (selectedDay, modifiers, dayPickerInput) => {
const val = dayPickerInput.getInput().value;
}
Uncaught TypeError: Cannot read property 'value' of null

日选器输入组件

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

日选取器输入自定义组件

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

来自此处的文档。onDayChange方法的签名为

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

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