請問我如何才能獲得僅當我開始使用 reactjs 在輸入欄位中寫入時才出現的清晰 x 圖示，例如谷歌頁面https://www.google.com中的搜索輸入
import { XIcon } from '@heroicons/react/solid';
export default function Search() {
const inputElt = useRef(null);
return (
<form className='flex'>
<input
ref={inputElt}
className='flex-grow focus:outline-none cursor-pointer'
type='search'
/>
<XIcon className='h-5' />
)
謝謝
uj5u.com熱心網友回復：
您可以根據輸入欄位的值有條件地呈現圖示。使用useState掛鉤維護值的狀態。每次您在輸入欄位中輸入值并設定狀態時，onChange 都會觸發。
export default function Search() {
const inputElt = useRef(null);
const [value,setValue] = useState('')
return (
<form className='flex'>
<input
ref={inputElt}
className='flex-grow focus:outline-none cursor-pointer'
type='search'
value={value}
onChange={(e) =>setValue(e.target.value)}
/>
{value && <XIcon className='h-5' />}
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/414884.html
標籤：
下一篇：來自getStaticProps的下一個Js背景關系引數回傳“{locales:undefined,locale:undefined,defaultLocale:undefined}”