惯用的方法是提升组件的状态--这正是MUI通过提供值setValue props所做的。

import { FormControl, FormLabel, TextField } from "@mui/material";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { Dayjs } from "dayjs";
import React from "react";

interface DatePickerProps {
  label: string;
  id:string;
  value: Dayjs | null;
  setValue: (newValue: Dayjs | null) => void;
}

const MyDatePicker = (props: DatePickerProps) => {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <FormControl sx={{ m: 1, width: "90%" }} size="small">
        <DatePicker
          label={props.label}
          value={props.value}
          onChange={props.setValue}
          renderInput={(params) => <TextField id={props.id} {...params} size="small" />}
        />
      </FormControl>
    </LocalizationProvider>
  );
};

export default MyDatePicker;

const ComponentWhereYouWantToUseMyDatePicker() => {  
  const [value, setValue] = React.useState<Dayjs | null>(null);

  // Do with value whatever you want.  

  return (
    <MyDatePicker label="Label" id="Id" value={value} setValue={setValue} />
  )
}

您可以添加回调onDateChange，这样就不必提升状态。

interface DatePickerProps {
  label: string;
  id: string;
  onDateChange?: (newValue: Dayjs | null) => void;
}

const MyDatePicker = (props: DatePickerProps) => {
  const [value, setValue] = React.useState<Dayjs | null>(null);
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <FormControl sx={{ m: 1, width: "90%" }} size="small">
        <DatePicker
          label={props.label}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
            if (props.onDateChange) props.onDateChange(newValue);
          }}
          renderInput={(params) => (
            <TextField id={props.id} {...params} size="small" />
          )}
        />
      </FormControl>
    </LocalizationProvider>
  );
};

您可以像这样在组件中使用它

const Component = () => {
  const handleDateChange = (newDate) => {
    console.log(newDate);
    // whatever you want to do with the value
  };

  return (
    <>
      <MyDatePicker
        id="someid"
        label="my label"
        onDateChange={handleDateChange}
      />
    </>
  );
};