如何在onSubmit之后使用表单显示超过一秒钟的内容

Question

我有一个表单组件，它由搜索栏和提交按钮组成。我想在用户提交搜索时显示一个日历，并保持显示，直到提交不同的搜索，但它只显示一秒钟就消失了。我该如何解决这个问题？

function showDisplay() {
setDisplay(true);
}
var result = "";
if (display) {
result = <div>
{filteredCalendars.map((calendar) => ( 
<Calendar calendar={calendar}/>))}
</div>

}
return(
<div>
<div className="text-center">
<h1>Schedule Playlists</h1>
</div>                        
<Form onChange={() => showDisplay()}>
<div className="search-box">
<BsSearch/> <input type="text"  placeholder="Search calendar by store ID..." onChange = {e => setSearch(e.target.value)} required/>
<Button type="submit">Submit form</Button>
</div>

</Form>
<div>
{result}
</div>

</div>

)
}

Answer 1

为什么在Form上使用onChange？如果你想捕捉提交事件，我通常会处理onSubmit:

<Form onSubmit={e => {e.preventDefault(); showDisplay()}}>
<div className="search-box">
<BsSearch/>
<input type="text"  placeholder="Search calendar by store ID..." onChange = {e => setSearch(e.target.value)} required/>
<Button type="submit">Submit form</Button>
</div>

</Form>

另外，请注意提交处理程序正在调用preventDefault()，这样它就不会执行默认的提交操作并刷新页面。