如何在 onSubmit 后使用表单显示内容的时间超过一秒钟答案

【问题标题】：how to display content after onSubmit using form for a longer time than just a second如何在 onSubmit 后使用表单显示内容的时间超过一秒钟
【发布时间】：2021-07-14 18:27:22
【问题描述】：

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

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>
    
)
}

【问题讨论】：

尝试使用useState 获取结果。
我试过了，但没用 - 使用 useState("") 与 result 和 setResult

标签： javascript reactjs

【解决方案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()，因此它不会执行默认提交操作并刷新页面。

【讨论】：

我不是要使用 onchange 但 preventdefault 帮助了谢谢！