Me gustaría agregar información sobre herramientas a un campo de entrada. Para hacer esto, envuelvo el campo de entrada en la información sobre herramientas y se muestra como se esperaba. Sin embargo, cuando paso el cursor por encima, imprime una advertencia.
Información sobre herramientas/Entrada
<Tooltip title="Title"> <Input /> </Tooltip>Advertencia
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Input which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node span ClearableLabeledInput@http://localhost:3000/static/js/bundle.js:15995:90 Input@http://localhost:3000/static/js/bundle.js:16374:90 Trigger@http://localhost:3000/static/js/bundle.js:59906:92 Tooltip@http://localhost:3000/static/js/bundle.js:58900:26 ./node_modules/antd/es/tooltip/index.js/Tooltip<@http://localhost:3000/static/js/bundle.js:20652:62 Puedo ocultar el error eliminando <React.StrictMode> pero me gustaría corregir este error.
¿Es esto un error en Ant Design o estoy agregando la Tooltip incorrectamente?
Esto parece un problema con los componentes de Ant Design. Por ejemplo, usar el DOM simple <input> no provoca este error.
Habiendo dicho eso, una solución es simplemente envolver <Input> de Ant en un elemento DOM simple como <div> lo resuelve:
<Tooltip title="prompt text"> <div> <Input /> </div> </Tooltip>Puede ver un ejemplo de trabajo en este sandbox