选择日期后,SingleDatePicker不会更新

时间:2019-06-06 14:18:53

标签: reactjs react-dates

我正在尝试在SingleDatePicker中使用react-bootstrap-table,但似乎不起作用。下面是我的代码

class EOLEditor extends React.Component {

    constructor(props) {
        super(props);
        this.updateData = this.updateData.bind(this);
        this.state = {
                focused: null,
                name: props.defaultValue,
                open: true,
                expiry_date: (this.props.defaultValue !== null ) ? moment(this.props.defaultValue, 'DD-MMM-YY hh:mm:ss.SSSSSS A') : null
        }
    }

    componentWillReceiveProps(nextProps) {
        console.log(this.props);
        console.log(nextProps.defaultValue);

        if(this.props.defaultValue != nextProps.defaultValue){
            this.setState({expiry_date : moment(this.props.defaultValue, 'DD-MMM-YY hh:mm:ss.SSSSSS A')});
        }
    }
    /*focus() {
        console.log(this.refs);
        this.refs.inputRef.focus();
    }*/

    updateData() {
        console.log(this.props.row.id);

        console.log(this.state.expiry_date);
        this.props.onUpdate({ id: this.props.row.id, expiry_date: this.state.expiry_date });
    }
    close = () => {
        this.setState({ open: false });
        this.props.onUpdate(this.props.defaultValue);
    };

    render() {
        console.log(this);
        //const m_date = (this.props.defaultValue == '') ? null : moment(this.props.defaultValue, 'DD-MMM-YY hh:mm:ss.SSSSSS A');
        //console.log(this.props.defaultValue);
        //console.log(m_date);
        return (
                <SingleDatePicker
                date={this.state.expiry_date} // momentPropTypes.momentObj or null
                // onDateChange={date => this.setState({ date })} // PropTypes.func.isRequired
                onDateChange={(e) => {
                    console.log(e);
                        const e_after = (e == null) ? '' : e.format('DD-MMM-YY');
                        this.setState({ expiry_date: e_after });
                        //this.onAfterSaveCell({ target: { defaultValue: e_after } }, 'expiry_date');
                        this.updateData();
                    }
                }
                focused={this.state.focused} // PropTypes.bool
                onFocusChange={({ focused }) => { console.log(focused); this.setState({ focused }); }} // PropTypes.func.isRequired
                showClearDate
                small
                displayFormat="DD-MMM-YY"
                ref="inputRef"
            />
        );
    }    
}

当我在onDateChange中选择一个日期时,仍记录相同的日期。 e不是我选择的日期

d: Thu Jul 18 2019 12:00:00 GMT+0100 (British Summer Time) {}
_f: "DD-MMM-YY hh:mm:ss.SSSSSS A"
_i: "31-DEC-18 12.00.00.000000 AM"
_isAMomentObject: true
_isUTC: false
_isValid: true
_locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", ordinal: ƒ, _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, …}
_pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(2), overflow: -1, charsLeftOver: 2, …}
__proto__: Object

0 个答案:

没有答案