Как загрузить новый компонент при нажатии кнопки? - PullRequest
Новая
       8

Как загрузить новый компонент при нажатии кнопки?

0 голосов
/ 16 апреля 2020

Я хочу открыть другой компонент, который в моем примере <HomePage />, когда пользователь заполняет форму входа и нажимает кнопку отправки. Я искал, и у меня было слишком много способов, но я не был уверен, почему никто не работал со мной. Есть ли простой способ добиться этого с помощью React Hooks?

Компонент входа 

const submit_login = () =>{
    //code to open <HomePage /> Component
}

<form>
    <div>
        <input type="text" placeholder="username"/>
    </div>
    <div>
        <input type="password" class="form-control" placeholder="password"/>
    </div>
    <div>
        <input type="submit" onClick={submit_login}  value="Login"/>
    </div>
</form>

Это очень простой сценарий, я считаю, что это должно быть очень легко реализовать. Я пытался router switch, hashrouter, useHistory, hookrouter, но все это не сработало. некоторые из найденных решений не были обновлены, поскольку я использую последнюю версию ReactJS.

1 Ответ

1 голос
/ 17 апреля 2020

Вот пример. проверьте

ParentComponent 

import React, {useEffect, useState} from 'react';
import ChildComponent from "./ChildComponent";

function ParentComponent(props) {

    const [isVisible, setIsVisible] = useState(false);

    function showComponent(event) {
        setIsVisible(!isVisible);
    }
    return (
        <div>
            <button onClick={showComponent} >{isVisible? 'Hide':'Show'} Component</button>
            {
                isVisible? <ChildComponent/>:null
            }
        </div>
    );
}
export default ParentComponent;

ChildComponent 

import React, {useEffect, useState} from 'react';

function ChildComponent(props) {

    return (
        <div>
            This is child component
        </div>
    );
}
export default ChildComponent;
...