在 React 的自动完成组件中移动占位符文本

Question

我正在尝试创建 Material UI 的 Autocomplete 组件。我如何将其显示为移动占位符，而不是将自动完成的建议显示为下拉列表？自动完成组件中的文本应该向左滑动？

代码：https://codesandbox.io/s/material-demo-forked-mgg7z?file=/demo.js

搜索结果（教父）应该有一个向左滑动的幻灯片作为占位符。

Answer 1

我在此演示中创建了一个自定义挂钩 useAnimatedPlaceholder

https://codesandbox.io/s/material-demo-forked-2em32?file=/demo.js

它可以很容易地插入到任何输入基础组件中。该功能是通过使用 useEffect 和 setTimeout 组合实现的。如果您有任何问题，请告诉我。

Answer 2

您还可以在自动完成中提供一个文本字段。