x 清除圖標僅在輸入具有值時出現 - 反應

Question

請我如何獲得僅當我開始使用 reactjs 在輸入字段中寫入時出現的清晰 x 圖標，就像谷歌頁面https://www.google.Z4D236D9A2D102C5FE6AD1C50DA4BEC5中的搜索輸入一樣

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' />
)

謝謝

Answer 1

您可以根據輸入字段的值有條件地呈現圖標。 使用useState掛鈎為值維護 state。 每次您在輸入字段中輸入值並設置 state 時，都會觸發 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' />}
)
}