如何在 React.js 中自定义 Material-UI KeyboardDatePicker 的 ToolbarComponent？

Question

您好，目前我正在使用 React、Material-UI、KeyboardDatePicker。 您可以在以下位置查看代码： https://codesandbox.io/s/material-demo-forked-rt1f1?file=/index.js

import "date-fns";
import React from "react";
import Grid from "@material-ui/core/Grid";
import DateFnsUtils from "@date-io/date-fns";
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker
} from "@material-ui/pickers";

export default function MaterialUIPickers() {
  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState(
    new Date("2014-08-18T21:11:54")
  );

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
        <KeyboardDatePicker
          margin="normal"
          id="date-picker-dialog"
          label="Date picker dialog"
          format="MM/dd/yyyy"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
          views={["year", "month", "date"]}
        />
      </Grid>
    </MuiPickersUtilsProvider>
  );
}

我想要做的是当我点击日历图标时，如果我点击日期工具栏（UI中的当前日期），我希望界面变为月份选择界面。

我打算使用 ToolbarComponent 自定义 datPicker。

从 Material-UI 官方文档 (https://material-ui-pickers.dev/api/KeyboardDatePicker) 得知我需要输入如下代码：

ToolbarComponent={ComponentClass, any> | FunctionComponent> }

但难于理解 ToolbarComponent 我应该进入。 如何自定义日历的道具？请告诉我。 谢谢

Answer 1

只需将一个函数传递给 ToolbarComponent API 并返回一个 JSX。

ToolbarComponent={() => <Box>HELLO, CUSTOM TOOL BAR</Box>}

上面的jsx会在日历上面渲染。