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

Question

祝大家有美好的一天。我遇到了从库中自定义DateRangePicker 组件的问题。@material-ui特别是，我正在尝试Button在日历下添加 3 个按钮。这就是我现在出来的方式（图1）。我已经发誓所有的文档，我错过了应对这项任务的知识。请告诉我如何做到这一点，至少是文字。我采用了一种不成熟的方式将这些按钮添加到本机（非受控反应）中，但我遇到了一个问题，即我无法暂停事件处理程序以启动 REACT-REDUX 生态系统。我知道对元素的呼吁应该通过 . ref，但我什至不知道如何获取 DataPicker 日历组件。

图 1。

就像我现在所做的那样——太恐怖了。我在打开 calendar 时进行了标记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>

标签： reactjstypescriptreact-reduxmaterial-ui