/**/

我有一个material 的日期 Select 器,如果你点击它所属的文本字段,它就会打开.如果在日期选取器打开时try Select 另一个文本字段,它将指向/焦点回到日期选取器.

Note:这个问题也是无的放矢的,它会在关闭DatePicker后再次重新聚焦.

示例演示:https://stackblitz.com/edit/react-b4xpki?file=demo.tsx

代码:

export default function BasicDatePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(null);
  const [open, setOpen] = React.useState(false);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <TextField placeholder='Click here while datepicker is opened' fullWidth={true} sx={{mb:2, mr: 2}}/>
      <DatePicker
        label="Basic example"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        open={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        renderInput={(props) => (
          <TextField {...props} onClick={(e) => setOpen(true)} />
        )}
      />
    </LocalizationProvider>
  );
}

那么如何重现问题呢?

  1. 单击操作日期 Select 器(而不是图标)
  2. 单击另一个文本字段
  3. 观察目标/焦点如何回到日期 Select 器上

推荐答案

您可以创建名为state的焦点,以便在<TextField />处控制onFocus

首先,创建焦点命名状态:

const [focus, setFocus] = useState(false);

TextField:如果onFocusopen为False,则currentTarget不应为焦点.

 <TextField
     {...props}
      onFocus={(e) => {
          setFocus(open);
          if (!open) {
             e.currentTarget.blur();
             return;
          }
      }}
      focused={focus}
      onClick={(e) => setOpen((prev) => !prev)}
 />

如果DatePicker中的值更改,则focus应为TRUE.

<DatePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
       setFocus(true);
    }}
    ...otherProps
/>

链接:https://stackblitz.com/edit/react-b4xpki-rirdxn?file=demo.tsx

Javascript相关问答推荐

从服务器获取数据时,是否必须在所有脚本中写入 catch error?

防止 Javascript 显示源代码

从 javascript 调用 AlpineJS 函数

所有带空格的语言至少有 3 个字母

如何只用一个点而不是三个点来分割文本?

Javascript 替换和更改变量中的字符串

焦点状态不应该改变,React.JS + TailwindCSS

仅在对代码进行更改后才更新状态

纹理应用不正确

根据另一个对象数组动态过滤对象数组

对象列表中多个值的setState

如何使用分组 javascript 嵌套数组?

从对象值数组接收类型

Axios 响应不显示数据

Node JS 没有编译我的私有实例变量

如何在嵌套的 Javascript 对象中获取父 ID 数组?

有没有办法在addEventListener中使用js写的html?

Cypress - 如何从 .t​​hen() 返回新值?

如何在 useEffect 中调用数组数据 - ReactJS

我如何将回调函数的值存储到 vue 数据中