Question

我想打开另一个组件，该示例在我的示例<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。

Answer 1

这里是示例。请检查

ParentComponent

        <div data-netdata="net.ens160"
                data-title="ens160 (Native)"
                data-chart-library="dygraph"
                data-width="90%"
                data-height="100%"
                data-after="-300"
                ></div>

ChildComponent

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;

单击按钮时如何加载新组件？

1 个答案: