所以我有以下组件，但当日期选择器打开时，我在控制台中看到一个关于缺少anchorEl的错误。我不确定我会把它分配到哪里。
<LocalizationProvider dateAdapter={AdapterLuxon}>
<DatePicker
label="Date"
open={datePickerOpen}
renderInput={(params) => {
const currentDate = DateTime.fromJSDate(
params.inputProps ? new Date(params.inputProps.value) : new Date()
);
return (
<div ref={params.ref}>
<input
disabled={params.disabled}
style={{ display: 'none' }}
value={params.inputProps?.value}
onChange={params.onChange}
{...params.inputProps}
/>
<button className="calendar-date-picker" onClick={() => toggleDatePicker()}>
{currentDate.toFormat(`MMM dd, yyyy`)}
<ArrowDropDownIcon sx={DatePickerDownArrowSx} />
</button>
</div>
);
}}
value={new Date()}
views={['month', 'day']}
onChange={(newValue: Date | null) => handleDateChange(newValue)}
onClose={() => toggleDatePicker()}
/>
</LocalizationProvider>
2条答案
按热度按时间ygya80vv1#
我认为这个问题与缺少对弹出框出现所需元素的引用有关。默认情况下，弹出框应该在单击输入时出现，但您可以自定义此行为。在代码中我看不到
inputRef属性。请注意，这个键不是inputProps的一部分，基本上你有这个{ inputRef, inputProps, InputProps }作为renderInput属性相关函数的参数。我认为应该添加
ref属性，类似于查看此链接了解更多信息
https://mui.com/x/react-date-pickers/date-picker/#custom-input-component
检查
<div ref={params.ref}>这一行，可能在params对象中没有ref键。您可能需要的是<div ref={params.inputRef}>或类似的东西。laximzn52#
上面是一个解决方案，但您的具体问题在于
anchorEl，即PopoverProps上声明的。弹出框所附的内容，即现任裁判