Material ui 选择器，如何防止在重绘时关闭

Question

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

如果重绘超级组件（比如由于日期更改），则包含日期选择器的组件将被销毁并重新创建，从而失去 "open" 状态。

我该如何管理它？ - 我可以手动说明选择器是否为 "open"。但是我似乎无法连接到 "click on date bar" 或 "click outside calendar"，因此我实际上无法控制 this.

包含选择器的组件：

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')
                }}
            />
        </>
    }
}

以及负责 "managing" 日期选择器的超级组件：

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>});
    }
}

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

Answer 1

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

Material ui 选择器，如何防止在重绘时关闭

Material ui pickers, how to prevent closing on redraw

reactjs

material-ui

mobx-react