react-datepicker无法切换月份问题求助

问题复现 #

react-datepicker组件无法切换月份，日期选择功能正常，但月份切换箭头按钮无响应；移除readonly属性后，输入框可正常输入日期，但日历面板的月份切换仍失效。使用版本：React ^18.3.1，react-datepicker ^4.10.0，组件代码如下：

<Grid item xs={6}>
    <Controller
        name={"periodFrom-" + input.index}
        control={input.form}
        render={({field: {onChange, value}, fieldState: {error}}) => (
            <div style={{marginTop: "10px"}}>
                <InputLabel>start date </InputLabel>
                <DatePicker dateFormat="dd/MM/yyyy"
                            customInput={<TextField variant="outlined" fullWidth
                                                    error={!!error}
                                                    inputProps={{readOnly: true}}
                                                    helperText={error ? error.message : null}/>}
                            selected={value} onChange={onChange}/>
            </div>
        )}
    />
</Grid>

解决方案 #

1. 调整readOnly属性位置 #

将readOnly从自定义输入组件（TextField）的inputProps中移到DatePicker组件本身，避免输入框的只读设置干扰日历面板的事件传递：

<Grid item xs={6}>
    <Controller
        name={"periodFrom-" + input.index}
        control={input.form}
        render={({field: {onChange, value}, fieldState: {error}}) => (
            <div style={{marginTop: "10px"}}>
                <InputLabel>start date </InputLabel>
                <DatePicker 
                    dateFormat="dd/MM/yyyy"
                    readOnly={true} // 移至DatePicker组件
                    customInput={
                        <TextField 
                            variant="outlined" 
                            fullWidth
                            error={!!error}
                            helperText={error ? error.message : null}
                        />
                    }
                    selected={value} 
                    onChange={onChange}
                />
            </div>
        )}
    />
</Grid>

2. 检查事件阻止逻辑 #

确认自定义输入组件（TextField）没有在onClick、onMouseDown等事件中调用e.stopPropagation()或e.preventDefault()，这类操作会阻止日历面板内部按钮的事件触发。

3. 验证样式文件引入 #

确保已在项目入口文件中引入react-datepicker的样式文件，缺失样式可能导致按钮点击区域失效：

import "react-datepicker/dist/react-datepicker.css";

4. 升级react-datepicker版本 #

react-datepicker v4.10.0属于较旧版本，可能存在与React 18的兼容性问题。建议升级至最新兼容版本（如v6.x），新版本修复了大量交互相关的bug，且对React 18支持更完善。

内容的提问来源于stack exchange，提问作者EcmaScriptIsMyNativeLanguage