材料用户界面选择器，如何防止在重绘时关闭

Question

我有一个选择器，它是组件的一部分，其中日期是从另一个超级组件中给出的。

如果重新绘制了超级组件（例如由于日期更改），则持有日期选择器的组件将被破坏并重新创建，从而失去“打开”状态。

我该如何管理？ -我可以手动声明选择器是否处于“打开”状态。但是，我似乎无法连接到“单击日期栏”或“在日历外单击”，因此我实际上不能control此。

包含选择器的组件：

export class DateDisplay extends React.Component {
    render() {
        const {date, onChange, onAccept, onOpen, label, openState} = this.props;

        return <>
            {label && <Typography variant={'subtitle2'} display={'inline'} style={{marginRight: '1ch'}}>
                {label}
            </Typography>}
            <DatePicker
                value={date}
                onOpen={() => {
                    this.setState({open: true},onOpen)
                }}
                onChange={onChange}
                onAccept={onAccept}
                format={'ddd, D MMMM YYYY'}
                variant={'inline'}
                open={openState}
                onClick={e => {
                    console.log('we clicked the picker')
                }}
            />
        </>
    }
}

以及负责“管理”日期选择器的超级组件：

export class DatesList extends React.Component {
    this.onSave = async () {/*code to request a save to the backend*/};
    onStartEditing = () {/*code to visually indicate we're editing a field*/};

    render() {
        const {dates} = this.props; //date is a moment + meta data.
        const sorted_dates = Array.from(eventData.dates.values()).sort(
            (l, r) =>
                (!l.start_date ? 0 : l.start_date.valueOf()) - (!r.start_date ? 0 : r.start_date.valueOf())
        );
        sorted_dates.map(date => {<div>
            <DateDisplay
                 label={'Event start date:'}
                 date={date.start_date}
                 onOpen={(e) => {
                     this.onStartEditing(e, 'start_date');
                 }}
                 onChange={(newDate) => {
                     date.start_date = !nullOrUndefined(newDate) ? newDate.toDate() : newDate;
                 }}
                 onAccept={async () => {
                     await this.onSave('start_date');
                 }}
            />
        </div>});
    }
}

作为附带的问题：我注意到，即使删除了排序，即使列表中只有一个元素，组件也不会重建，因此排序总是给出相同的“顺序”，为什么呢？

Answer 1

您可以使用自己的状态进行打开/关闭。使用open属性以及onClose和onOpen回调。文档中更深入的示例：https://material-ui-pickers.dev/guides/controlling-programmatically