reactjs - 在 Material-UI 的 DateRangePicker 组件中添加按钮或自定义 DateRangePicker

大家好。我在使用 @material-ui 库的 DateRangePicker 组件时遇到了自定义的问题。具体来说，我想在日历下添加 3 个 Button 按钮。现在我得到了这样的效果（图片 1）。我已经查阅了所有文档，但我仍然缺乏处理这个任务的知识。请告诉我至少用语言说明如何实现。我尝试以一种不受控（非 React 控制）的方式将这些按钮添加到本地组件中，但遇到了难题，无法暂停事件处理器来启动 REACT-REDUX 生态系统。我明白应该通过 ref 来访问元素，但我甚至不知道如何获取 DatePicker 日历组件。

图片 1。

就像我当时所做的那样——这是恐怖的。我在打开日历时做标记 onopen，这不允许我进一步附加事件差异并与本地状态互动（至少不能与 Dispatch 互动）。

<Grid item lg={3} md={5} sm={12}>
                    <MuiDateRangePicker
                        startText="От"
                        endText="До"
                        mask="__.__.____"
                        calendars={1}
                        value={selectedDate}

                        okText={"Okk"}
                        showDaysOutsideCurrentMonth={true}
                        showTodayButton={true}
                        showToolbar={false}
                        todayText={"Сегодня!"}
                        PopperProps={{id:'filter-data-range-picker', ref: calendarPopupRef}}
                        onOpen={() => {
                            console.log(`ff `,calendarPopupRef.current);
                            let calendarWrapper = calendarPopupRef?.current?.querySelector('.MuiPickersDesktopDateRangeCalendar-rangeCalendarContainer');
                            let panel = calendarWrapper?.querySelector('.calendar-bottom-panel');
                            if (!panel) {
                                let div = document.createElement('div');
                                div.innerHTML = `
                                    <div class="calendar-bottom-panel" style="display: grid; grid-gap: 10px; grid-template-columns: auto auto auto; padding: 0 14px 14px">
                                        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button" onClick=""><span class="MuiButton-label">День</span><span class="MuiTouchRipple-root"></span></button>
                                        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button" onClick=""><span class="MuiButton-label">Неделя</span><span class="MuiTouchRipple-root"></span></button>
                                        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button" onClick=""><span class="MuiButton-label">Месяц</span><span class="MuiTouchRipple-root"></span></button>
                                    </div>
                                `;
                                calendarWrapper?.appendChild(div);
                            }
                            
                        }}
                        onClose={() => console.log('close calendar')}

                        onChange={date => {
                            handleDateChange(date);
                            dispatch(changeValueFilterByKeyNameOfTreeAction("lastConversationTime", date as any))
                        }}

                        ToolbarComponent={(props) => (
                            <div {...props}>
                                
                                Test
                            </div>
                        )}
                        
                        
                        renderInput={(startProps, endProps) => (
                            <>
                                
                                <TextField 
                                    {...startProps} 
                                    variant="filled" 
                                    helperText=""
                                    inputProps={{...startProps.inputProps, placeholder:"дд.мм.гггг"}}
                                    InputProps={{
                                        endAdornment: (
                                            <InputAdornment position="end">
                                                {selectedDate[0] !== null && (
                                                    <IconButton size="small" onClick={() => {
                                                        const date = [null, selectedDate[1]]
                                                        handleDateChange(date)
                                                        dispatch(changeValueFilterByKeyNameOfTreeAction("lastConversationTime", date as any))
                                                    }}>
                                                        <ClearIcon fontSize="small"/>
                                                    </IconButton>
                                                )}
                                                <DateRangeIcon fontSize="small" />
                                            </InputAdornment>
                                        ),
                                    }}
                                />

                                
                            
                                <TextField 
                                    {...endProps} 
                                    variant="filled" 
                                    helperText=""
                                    inputProps={{...endProps.inputProps, placeholder:"дд.мм.гггг"}}
                                    InputProps={{
                                        endAdornment: (
                                            <InputAdornment position="end">
                                                {selectedDate[1] !== null && (
                                                    <IconButton size="small" onClick={() => {
                                                        const date = [selectedDate[0], null]
                                                        handleDateChange(date)
                                                        dispatch(changeValueFilterByKeyNameOfTreeAction("lastConversationTime", date as any))
                                                    }}>
                                                        <ClearIcon fontSize="small"/>
                                                    </IconButton>
                                                )}
                                                <DateRangeIcon fontSize="small" />
                                            </InputAdornment>
                                        ),
                                    }}
                                />
                                
                            </>
                        
                        )}
                    />
                </Grid>