输入表单反应后重定向

Question

我有一个反应表单，实际上我可以用提交按钮让它工作。当我单击提交按钮时，链接会将我发送到所需的组件。

但是，当我像大多数人一样在输入表单中写下一些东西后按">输入"时，实际上什么也没发生。

当有人在表单中写下内容并按回车键时，如何重定向到结果页面？

下面是表单，以及他与 useState 的功能组件：

function Header(){
const [title, setTitle] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (!title) return;
setTitle(title);
setTitle("");
console.log(title);
}
return(
<nav>
<li className="liensNav">
<Link className="lien" to="/">
{/* Tu as fill white dans le logo svg */}
<img className="logo" src={logo} alt="logo"></img>
</Link>
</li>
<li className="liensNav">
<Link className="lien" to="/">Top Games</Link>
</li>
<li className="liensNav">
<Link className="lien" to="/top-streams">Top Live Streams</Link>
</li>
<li className="liensNav">
<form className="formSubmit" onSubmit={handleSubmit}>
<input className="inputRecherche" type="text" value={title}
required onChange={(e) => setTitle(e.target.value)} />

<button type="submit">
<Link
to={{
pathname: "/resultats",
state: {
id : title
}
}}
>
<img className="logoLoupe" src={search} alt="icone loupe"/>
</Link>
</button>

</form>
</li>
</nav>
)
}
export default Header;

也许我需要使用onKeyPress？但无论如何我不知道如何在输入时重定向，这是主要问题。

如果有人路过，谢谢。

Answer 1

是的，您需要 onKeyPress 或 onKeyUp，在其处理程序中，您可以像这样检查输入 并使用历史记录重定向到页面

handleKeyDown(e) {
if (e.key === 'Enter') {
history.push('/resultats')
}
}

您输入

<input className="inputRecherche" type="text" value={title}
onKeyPress={(e) => this.handleKeyDown(e)}
required onChange={(e) => setTitle(e.target.value)} />

希望对你有帮助

Answer 2

您可以检查特定值是否存在，如果存在，则重定向。

if(title) {
// redirect or whatever....
}

React-router-dom 有一个漂亮的重定向组件。