React + MUI 日期选择器，作为 iso 字符串控制，当字符串设置为空时，文本输入不会清除

Question

使用 Mui DatePicker 并将值控制为字符串，如果我开始在文本字段中输入并将其保留为 01/MM/YYYY，然后单击外部清除按钮将受控值设置为 null，则文本字段不会已清除。

如果我的话，这很好用，

• 填写日期，例如：01/01/2000
• 将值控制为 luxon DateTime 对象

工作示例

对于我的问题的视觉效果，清除按钮没有任何作用。

代码如下：

import { useState } from "react";
import { DateTime } from "luxon";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { Button } from "@mui/material";

export default function App() {
  const [startOpen, setStartOpen] = useState(false);
  const [val, setVal] = useState(DateTime.now().toISODate());
  return (
    <>
      <div className="App">
        <LocalizationProvider dateAdapter={AdapterLuxon}>
          <DatePicker
            open={startOpen}
            onClose={() => setStartOpen(false)}
            sx={{ flex: 1 }}
            slotProps={{
              field: {
                clearable: true,
                onClear: () => {},
                onError: () => {},
              },
              textField: {
                onClick: () => setStartOpen(true),
              },
            }}
            onChange={(v) => {
              setVal(v);
            }}
            onError={() => {}}
            value={DateTime.fromISO(val)}
          />
        </LocalizationProvider>
      </div>
      <Button
        onClick={() => {
          setVal(null);
          console.log(val);
        }}
      >
        Clear
      </Button>
    </>
  );
}

Answer 1

您需要将

inputRef

属性设置为选择器并在下面的清除按钮回调中调用。

ref.current.value = null;

这是完整的代码。

import "./styles.css";
import { useState, useRef } from "react";
import { DateTime } from "luxon";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { Button } from "@mui/material";

export default function App() {
  const [startOpen, setStartOpen] = useState(false);
  const [val, setVal] = useState(DateTime.now().toISODate());
  const ref = useRef();
  return (
    <>
      <div className="App">
        <LocalizationProvider dateAdapter={AdapterLuxon}>
          <DatePicker
            open={startOpen}
            onClose={() => setStartOpen(false)}
            sx={{ flex: 1 }}
            slotProps={{
              field: {
                clearable: true,
                onClear: () => {},
                onError: () => {},
              },
              textField: {
                onClick: () => setStartOpen(true),
              },
            }}
            onAccept={setVal}
            // onChange={(v) => {
            //   // let dateString: string | null = "";
            //   // if (v) {
            //   //   dateString = v.toISODate();
            //   // }
            //   // onChange(dateString);
            //   debugger;
            //   setVal(v);
            // }}
            onError={() => {}}
            value={DateTime.fromISO(val)}
            inputRef={ref}
          />
        </LocalizationProvider>
      </div>
      <Button
        onClick={() => {
          setVal(() => null);
          ref.current.value = null;
          console.log(val);
        }}
      >
        Clear
      </Button>
    </>
  );
}