受控DateTimePicker切换时焦点未同步问题求助

问题分析 #

当两个同级的DateTimePicker组件共存时，若第一个Picker弹窗处于打开状态，点击第二个Picker的输入框，第二个弹窗会打开，但焦点仍停留在第一个输入框上。这是因为MUI的Picker默认在弹窗打开时不会自动重新聚焦输入框，且多个Picker的弹窗状态未联动管理。

解决方案 #

通过手动管理每个Picker的打开状态，结合输入框的焦点控制，实现点击时聚焦对应输入框并切换弹窗。

步骤1：定义状态与输入框引用 #

使用React状态分别控制两个Picker的弹窗状态，同时通过useRef获取每个输入框的DOM节点，用于后续手动聚焦操作。

import { useState, useRef } from 'react';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

const DualDateTimePicker = () => {
  // 控制两个Picker的弹窗显示/隐藏
  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);
  // 存储输入框DOM引用，用于手动聚焦
  const inputRef1 = useRef(null);
  const inputRef2 = useRef(null);
  // 存储Picker的日期值
  const [value1, setValue1] = useState(null);
  const [value2, setValue2] = useState(null);

步骤2：编写输入框点击处理逻辑 #

为每个Picker的输入框添加自定义点击事件，点击时完成三个操作：关闭另一个Picker的弹窗、打开当前Picker的弹窗、手动聚焦当前输入框。

const handleInputClick1 = () => {
    setOpen2(false);
    setOpen1(true);
    inputRef1.current?.focus();
  };

  const handleInputClick2 = () => {
    setOpen1(false);
    setOpen2(true);
    inputRef2.current?.focus();
  };

步骤3：传递自定义配置到DateTimePicker #

将自定义的弹窗状态、点击事件和输入框引用通过slotProps传递给DateTimePicker，覆盖默认的弹窗控制逻辑。

return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>
        <DateTimePicker
          label="Picker 1"
          value={value1}
          onChange={setValue1}
          open={open1}
          onOpen={() => setOpen1(true)}
          onClose={() => setOpen1(false)}
          slotProps={{
            textField: {
              inputRef: inputRef1,
              onClick: handleInputClick1,
            },
          }}
        />
        <DateTimePicker
          label="Picker 2"
          value={value2}
          onChange={setValue2}
          open={open2}
          onOpen={() => setOpen2(true)}
          onClose={() => setOpen2(false)}
          slotProps={{
            textField: {
              inputRef: inputRef2,
              onClick: handleInputClick2,
            },
          }}
        />
      </div>
    </LocalizationProvider>
  );
};

export default DualDateTimePicker;

关键说明 #

• 联动管理弹窗状态：确保同一时间只有一个Picker弹窗处于打开状态，避免状态冲突。
• 手动强制聚焦：通过inputRef获取输入框DOM节点，调用focus()方法强制转移焦点到当前点击的输入框。
• 覆盖默认点击逻辑：通过slotProps.textField.onClick替换Picker输入框的默认点击行为，确保执行自定义的状态切换与焦点控制。

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