时间戳

首页 > 解决方案 > 如何在 onSubmit 时使用功能组件渲染页面？

reactjs - 如何在 onSubmit 时使用功能组件渲染页面？

问题描述

function Header() {
    const [search, setSearch] = useState('');
    const [{search_results}, dispatch] = useStateValue();

表单提交时运行的函数：

function search_item(event){
        event.preventDefault();
        if(search_results.length===0){
            alert("No results Found")
        }else{
            alert("Found Something");
            // render a search results page;            
        }
    }

我想在按 Enter 后呈现一个类似“/searchResults”的页面，其中包含我的 search_results 状态值。

    return (
        
        <div className="header">
            <img className="header__logo" src="" alt="" />
            <div className='header__searchBox'>
                <form onSubmit={search_item} className="header__search">
                    <input placeholder="Input The Keywords" onChange = {event => setSearch(event.target.value)}/>
                    <SearchIcon className="header__searchIcon"/>
                </form>

标签： reactjsreact-routerreact-functional-component

解决方案

您必须声明一个用 null/undefined 初始化的状态（例如结果）。调用search_item并将搜索结果设置为该状态。然后使用条件渲染来渲染结果（如果存在）。

假设您有一个设置为结果的 searchResult 状态，在您创建了一个提供结果项并返回渲染组件的渲染器函数之后，您可以为它进行条件渲染：

<div>
  <form ...>
    ...
  </form>
  {searchResult && (
     <div>
       {searchResults.map(renderResultItem)}
     </div>
  )}
</div>

推荐阅读