我正在使用react-date-picker,我想将其创建为日期选择器组件,可以在页面的每个部分使用。我遇到的问题是onchange方法,因为在状态更改时,它不知道要更改的列。我在onchange方法中丢失了一些东西。 当我选择一个日期时,错误便是
无法读取值未定义的属性
export interface IIDateTimePropextends extends IFormControlProps {
//options from react-datepicker
type?: string;
dateFormat?:string;
// optional properties
placeholder?: string;
peekNextMonth?:boolean;
showMonthDropdown?:boolean;
showYearDropdown?:boolean;
dropdownMode?:string;
placeholderText?:string;
selected?:string;
onKeyPress?: (e: any) => {};
onKeyUp?: (e: any) => {};
step?: number;
checked?:boolean;
}
export class DatePickerNew extends React.PureComponent<IIDateTimePropextends, any>{
classes: string[];
constructor(props: IInputProp) {
super(props);
this.state = {
dirty: false,
valid: false,
validated: false,
maxLength: this.props.maxLength || 250,
minLength: this.props.minLength || 1,
minNumber: this.props.minNumber || 0,
maxNumber: this.props.maxNumber || 999999999999999,
type: "date",
validationMessage: ""
}
}
onChange = (e: any) => {
//we will need to validate the value entered before we send the data to the calling component
const onChange = this.props.onChange || ((a: any) => { });
const result = e.target.value
e.target.value = DateTime.parse(e.target.value, DateTime.dbDateOutPutFormat);
onChange(e);
this.setState({
dirty: true,
valid: ??,
validated: true,
validationMessage: ??
});
}
onBlur = (e: any) => {
//we need to validate the field before firing the handler for the parent component
//alert(e.target.value);
const onBlur = this.props.onBlur || ((a: any) => { });
const onChange = this.props.onChange || ((a: any) => { });
const result = e.target.value
e.target.value = DateTime.parse(e.target.value, DateTime.dbDateOutPutFormat);
onBlur(e);
onChange(e);
if (this.state.dirty) {
this.setState((prevState: any) => ({
dirty: prevState.dirty,
valid: ??,
validated: true,
validationMessage: ??
}));
}
}
render() {
this.classes = this.props.classes || [];
return (
<ErrorBoundary errorMessage="Error rendering DatePicker">
<DatePick
id={this.props.id}
name={this.props.name}
title={this.props.title}
required={this.props.required}
dateFormat= {DateTime.dateOutPutFormat}
value={DateTime.parse(this.props.value, DateTime.dateOutPutFormat)}
onChange={this.onChange}
peekNextMonth
showMonthDropdown
showYearDropdown
dropdownMode="select"
type="text"
placeholderText="DD/MM/YYYY"
/>
</ErrorBoundary>);
}
}
当我调用另一个名为DaysSetup的组件时
<DatePickerNew
id="holidayDate"
title="Holiday Date"
label="Holiday Date"
required={true}
name="holidayDate"
onChange=???//don't know what to do here
selected={this.state.model.holidayDate}
/>