Question

我尝试添加工具提示来包装KeyboardDatePicker，并将其简单地包装在工具提示中会提供以下错误：

警告：道具类型失败：提供给children的道具ForwardRef(Tooltip)无效。预期可以包含参考的元素。您是否意外地将普通函数组件用于元素？有关更多信息，请参见https://material-ui.com/r/caveat-with-refs-guide      在ForwardRef（Tooltip）中（由WithStyles（ForwardRef（Tooltip）创建））

在WithStyles（ForwardRef（Tooltip））中（在src / index.js：17处）

在MuiPickersUtilsProvider中（在src / index.js：16处）

在App中（位于src / index.js：33）

警告：不能为功能组件提供引用。尝试访问此引用将失败。您是要使用React.forwardRef（）吗？

检查ForwardRef(Tooltip)的渲染方法。      在PickerWithState中（在src / index.js：19处）      在ForwardRef（Tooltip）中（由WithStyles（ForwardRef（Tooltip）创建））      在WithStyles（ForwardRef（Tooltip））中（在src / index.js：17处）      在MuiPickersUtilsProvider中（在src / index.js：16处）      在App中（位于src / index.js：33）

如果我将工具提示包裹在a中，它会绕过错误，但看起来像是hack，并且工具提示在字段下方未正确对齐。在我对ForwardRef的阅读中，我无法在这里弄清楚如何解决这个问题。谁能帮助正确解决此问题？

https://codesandbox.io/s/mui-pickers-tooltip-1hsn2

import React, { useState } from "react";
import ReactDOM from "react-dom";

import DayjsUtils from "@date-io/dayjs";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";

import { Tooltip } from "@material-ui/core";

function App() {
  const [selectedDate, handleDateChange] = useState();

  return (
    <MuiPickersUtilsProvider utils={DayjsUtils}>
      <Tooltip placement={"bottom"} title={"This tooltip overlaps"}>
        {/*<span>*/}
        <KeyboardDatePicker
          label={"hello"}
          variant="inline"
          autoOk
          value={selectedDate}
          onChange={handleDateChange}
        />
        {/*</span>*/}
      </Tooltip>
    </MuiPickersUtilsProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

我为同一件事摔跤。我认为您可以通过使用TextFieldComponent组件上的KeyboardDatePicker道具来获得所需的结果。一个警告是，如果您使用内联函数，渲染道具样式，则输入将在键盘编辑过程中失去焦点，但是会传递这样的命名功能组件。

KeyboardDatePicker API：https://material-ui-pickers.dev/api/KeyboardDatePicker

https://codesandbox.io/s/mui-pickers-tooltip-48fs5

import React, { useState } from "react";
import ReactDOM from "react-dom";

import DayjsUtils from "@date-io/dayjs";
import { TextField } from "@material-ui/core";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";

import { Tooltip } from "@material-ui/core";

function TextFieldWithTooltip(props) {
  return (
    <Tooltip placement={"bottom"} title={"This tooltip should work"}>
      <TextField {...props} />
    </Tooltip>
  )
}

function App() {
  const [selectedDate, handleDateChange] = useState();

  return (
    <MuiPickersUtilsProvider utils={DayjsUtils}>
      <KeyboardDatePicker
        label={"hello"}
        variant="inline"
        autoOk
        value={selectedDate}
        onChange={handleDateChange}
        TextFieldComponent={TextFieldWithTooltip}
      />
    </MuiPickersUtilsProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在Material-UI工具提示中包装DatePicker失败，并出现ForwardRef（Tooltip）错误

1 个答案: