ReactJS中如何将搜索栏的onChange实时搜索改为点击按钮触发API电影搜索

没问题，我来帮你把实时搜索改成点击按钮触发的模式！核心思路是把输入框的实时值和筛选用的关键词分开维护，只有当用户点击按钮（或按回车）时，才将输入值同步到筛选关键词，进而触发电影筛选。

具体修改步骤： #

1. 新增状态存储输入框实时值
   我们需要一个临时状态来保存用户在输入框里的内容，而不是直接更新筛选用的searchMovie。这样输入时不会实时触发筛选。

2. 修改输入框的onChange事件
   让输入框的变化只更新临时状态，而非直接更新筛选关键词。

3. 处理表单提交事件
   利用表单的onSubmit事件（同时支持点击按钮和回车触发），在提交时阻止默认的页面刷新行为，然后将临时输入值同步到searchMovie，触发筛选。

修改后的完整代码： #

首先更新状态定义：

// 新增临时状态存储输入框内容
const [inputValue, setInputValue] = useState('');
// 原来的筛选关键词状态保留，初始为空
const [searchMovie, setSearchMovie] = useState('');

然后修改表单和输入框部分：

<form 
  action='/' 
  method='get'  // 修正原拼写错误：methode → method
  className='Search-Bar'
  onSubmit={(e) => {
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    // 将输入框的临时值同步到筛选关键词，触发筛选
    setSearchMovie(inputValue);
  }}
> 
  <input 
    type='text' 
    id='searchbar' 
    className='searchbar' 
    placeholder='Rechercher un titre, un réalisateur...'
    value={inputValue}  // 绑定临时状态到输入框值
    onChange={(e) => { 
      // 输入时只更新临时状态
      setInputValue(e.target.value); 
    }} 
  /> 
  <button type='submit' className='search-button'> 
    <AiOutlineSearch /> OK 
  </button> 
</form>

你的筛选逻辑代码可以保持不变，因为searchMovie现在只有在点击按钮时才会更新，筛选也只会在此时触发：

const allMovies = movies 
  .filter((value) => { 
    if (searchMovie === '') { 
      return value; 
    } else if (value.title.includes(searchMovie)) { 
      return value; 
    }
    // 补充默认返回值，避免逻辑漏洞
    return false;
  }) 
  .map((movie, index) => { 
    // 你的电影渲染逻辑...
  })

额外优化点： #

• 修正了表单的methode拼写错误，改为标准的method。
• 给按钮加上type='submit'，确保它能正确触发表单的onSubmit事件。
• 在筛选逻辑的filter里添加了默认返回false，避免某些情况下的逻辑漏洞。
• 使用表单的onSubmit事件，同时支持点击按钮和回车触发搜索，提升用户体验。

这样修改后，用户输入关键词时不会实时筛选，只有点击“OK”按钮或者按下回车键，才会触发电影筛选，展示匹配的结果。

内容的提问来源于stack exchange，提问作者Caroline Dorchies