ReactJS // 搜索欄 onClick 按鈕

Question

我為 API 創建了這個搜索欄。 如您所見，搜索欄正在處理 onChange 事件。 由於標題，用戶正在搜索電影。 我想用按鈕搜索帶有 onClick 事件的電影。 例如，我正在搜索泰坦尼克號，只有這部電影必須出現。

<form action='/' methode='get' className='Search-Bar'>
  <input
    type='text'
    id='searchbar'
    className='searchbar'
    placeholder='Rechercher un titre, un réalisateur...'
    onChange={(e) => {
      setSearchMovie(e.target.value);
    }}
  />
  <button className='search-button'>
    <AiOutlineSearch /> OK
  </button>
</form>

這是我的過濾器代碼：

const allMovies = movies
.filter((value) => {
  if (searchMovie === '') {
    return value;
  } else if (value.title.includes(searchMovie)) {
    return value;
  }
})
.map((movie, index) => {
  return ( .............

它正在工作，但我不知道如何通過按鈕搜索電影......你知道我該怎么做嗎？

謝謝 ！

Answer 1

假設您的 onClick 位於按鈕上，它將是這樣的，您將電影的值設置為輸入字段的值。

使用 onChange 在組件中為 searchFieldValue 設置一個值，並將其與 onClick 一起使用。 Ps，據我所知，您的代碼只是 html 和 JS，而不是與反應相關的問題。

<button 
  className='search-button'
  onClick={(e) => {
     setSearchMovie(searchFieldValue);
  }}
>
  <AiOutlineSearch /> OK
</button>