输入表单反应后重定向答案

【问题标题】：Redirect after enter form react输入表单反应后重定向
【发布时间】：2020-02-03 15:16:43
【问题描述】：

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

但是，当我像大多数人一样，在输入表单中写入内容后按“enter”时，确实没有发生任何事情。

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

这里是表单，以及他的带有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 ？ 但无论如何我不知道如何在输入时重定向，这是主要问题。

如果有人路过，谢谢。

【问题讨论】：

将链接放在外面，然后将按钮包裹在里面。

标签： reactjs react-router react-hooks

【解决方案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)} />

希望对你有帮助

【讨论】：

【解决方案2】：

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

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

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

【讨论】：