React Date Picker Onchange方法令人困惑

时间:2018-12-11 11:56:37

标签: javascript reactjs

我正在使用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}
/>

0 个答案:

没有答案