Перенаправить после ввода формы реагировать - PullRequest
Новая
       13

Перенаправить после ввода формы реагировать

1 голос
/ 05 октября 2019

У меня есть форма в реакции, на самом деле я могу заставить ее работать с кнопкой отправки. Когда я нажимаю на кнопку отправки, ссылка отправляет меня на нужный компонент.

Но когда я нажимаю " введите " после того, как что-то написано в моей форме ввода, как это делают большинство людей, ничего не происходит на самом деле.

Как можноЯ перенаправляю на страницу результатов, когда кто-то пишет что-то в форме и нажимает клавишу ввода?

Вот форма и его функциональный компонент с использованиемState: 


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 ? Но в любом случае я не знаю, как перенаправить при входе, это главная проблема.

Спасибо, если кто-то пройдет мимо.

Ответы [ 2 ]

1 голос
/ 05 октября 2019

Да, вам понадобится 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)} />

Надеюсьэто помогает

0 голосов
/ 05 октября 2019

Вы можете просто проверить, существует ли конкретное значение, если это так, то перенаправить. 

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

React-router-dom имеет отличный компонент перенаправления.

...