Свернуть DatePicker в всплывающей подсказке Material-UI с ошибкой ForwardRef (Tooltip) - PullRequest
Новая
       45

Свернуть DatePicker в всплывающей подсказке Material-UI с ошибкой ForwardRef (Tooltip)

0 голосов
/ 30 октября 2019

Я пытаюсь добавить всплывающую подсказку, чтобы обернуть 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)

в приложении (в 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 (atsrc / index.js: 16) в приложении (в src / index.js: 33)

Если я обертываю всплывающую подсказку в a, она обходит ошибку, но выглядит как хак и всплывающая подсказкане выровнен должным образом под полем. В моем чтении 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);
...