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

Question

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

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

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

Answer 1

我在这个演示中创建了一个自定义钩子(Hook) useAnimatedPlaceholder

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

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