Question

我有一个实体，其日期在datepicker组件中我需要为新日期更改。要做到这一点，我正在使用弹出窗口。如果我单击日期选择器并使用函数this.props.handleDateChange处理更改但弹出窗口工作完美无缺，但如果用户使用键盘键入日期，则无法捕获新日期并使用我的值修改父状态datepicker this.props.myEntityCurrentDate。我怎样才能做到这一点？

我有以下HOC对应弹出响应。它接收一个正文和一个页脚。

const createPopup = (Body, Footer) => {
    class Popup extends React.PureComponent {
        render() {
            return <div className='popup-react'>
                    <div className='popup-react-content'>

                        <div>

                            <div>
                                <span>{this.props.title}</span>
                            </div>

                            <div>
                                <Body {...this.props} />
                            </div>

                            <div>
                                <Footer {...this.props} />
                            </div>
                        </div>

                    </div>
                </div>;
        }
    }
    return Popup;
}

我为所需的页面创建了以下正文和页脚

class PopupBody extends React.PureComponent {
    render() {
        return <div>
                   <DatePicker
                       dateFormat="MM/DD/YYYY"
                       value={this.props.myEntityCurrentDate}
                       onChange={this.props.handleDateChange}
                       />
               </div>;
    }
}

class PopupFooter extends React.PureComponent {
    render() {
        return <div>
                   <button type="button">
                       <span onClick={() => this.props.handleSubmit(this.props.myEntityId)}>Accept</span>
                   </button>
                   <button type="button" onClick={this.props.closePopup}>
                       <span className='ui-button-text'>Cancel</span>
                   </button>
               </div>;
    }
}

const Popup = createPopup(PopupBody, PopupFooter);

将使用这些组件并呈现弹出窗口的组件如下：

class MyEntity extends React.Component {

    constructor(props) {
        super(props);

        this.state = {           
            showPopup: true,
            newDate: null,
            errors: []
        };

        //bind of this


        };
    }

    handlePopupDateChange(dueDate) {
        this.setState({
            newDate: dueDate,
            errors: []
        });
    }

    handlePopupSubmit(id) {
        var validations = {
            newDate: {
                presence: {
                    allowEmpty: false, message: " can't be empty"
                }
            }
        };

        validate(this.state, validations, () => this.submitPopupForm(id), this.renderPopupErrors);
    }

    submitPopupForm(id) {
        var vm = { Id: parseInt(id), DueDate: this.state.newDate ? this.state.newDate.format("DD-MM-YYYY") : null }

        this.props.apiClient.post('/api/MyEntity/Put/',
            vm,
            this.formPopupSucceeded,
            this.formPopupFailed);
    }

    formPopupSucceeded() {
        this.togglePopup();
        window.location.reload();
    }

    formPopupFailed(response) {
        this.togglePopup();
        this.renderPopupErrors([response.Message]);
    }

    renderPopupErrors(validationErrors) {
        this.togglePopup();
        this.setState({ errors: validationErrors });
    }

    togglePopup() {
        this.setState({
            showPopup: !this.state.showPopup,
            newDate: null,
        });
    }

    render() {
       return <div>
                    <If condition={this.state.showPopup}>
                       <Popup
                           title='My Popup Title'
                           closePopup={this.togglePopup}
                           myEntityCurrentDate={myMappedEntity.Date}
                           handleDateChange={this.handlePopupDateChange}
                           handleSubmit={this.handlePopupSubmit}
                           Date={this.state.newDate}
                           myEntityId={myMappedEntity.Id} />
                    </If>
               </div>;
    }

}

如何在react datepicker

0 个答案: