MUI DatePicker 按钮缺少 anchorEl

Question

所以我有以下组件，但是当日期选择器打开时，我在控制台中看到有关缺少 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>

Answer 1

我认为此问题与缺少对让弹出窗口出现所需的元素的引用有关。默认情况下，单击输入时应出现弹出窗口，但您可以自定义此行为。在代码中我看不到 inputRef 属性。请注意，此键不是 inputProps 的一部分，基本上您将此 { inputRef, inputProps, InputProps } 作为 renderInput 属性相关函数的参数。

我认为您应该添加 ref 属性，例如

<input
  disabled={params.disabled}
  style={{ display: 'none' }}
  value={params.inputProps?.value}
  onChange={params.onChange}
  ref={params.inputRef}
  {...params.inputProps}
/>

查看此 link 了解更多信息

https://mui.com/x/react-date-pickers/date-picker/#custom-input-component

同时检查关于 <div ref={params.ref}> 的行，可能 params 对象中没有 ref 键。可能你想要的是 <div ref={params.inputRef}>，或者类似的东西。

MUI DatePicker 按钮缺少 anchorEl

MUI DatePicker Button Missing anchorEl

reactjs

material-ui