Question

我已经在堆栈溢出中寻找了这个问题的答案，但是没有遇到这个特定问题的答案。我有一个登录页面，上面有一个表单。该表单具有“登录”或“注册”选项。我想做的是，当单击“登录”时，包含“注册”内容的表单的组件逐渐消失，而包含“登录”内容的组件的组件逐渐消失，反之亦然。
该网页的示例如下所示。因此，我们在窗体上方有一个切换右上角和“登录/注册”标题，我也想在单击时执行此内容切换。

研究了这一点后，我发现react从父级到子级都有一个“单向流”，但是仍然完全不知道如何实现。 PageSwitcher是其自己的组件，在单击时需要以某种方式将变量active的状态设置为<SignUp />和<SignIn />进行更改。同样，单击SignIn/SignUp标题时也会发生相同的情况。

所以我知道我需要利用状态来确定要显示的组件和要隐藏的组件。但是点击是在单独的组件上进行。因此，我需要以某种方式将呼叫从诸如<pageSwitcher />之类的组件路由到<SignUp />，根据我的阅读，您无法做出反应？

很显然，我对这个框架还很陌生，所以一定要误解一些基本概念，因为这是我要尝试的一件非常简单的事情。我可以立即用普通的javascript代替，这是更好的方法吗？

CODE
App.js：

function App() {
    return(
        <div className="App">
            <Landing_Aside />
            <Landing_FormSide />
        </div>
    );
}

Landing_FormSide：

class Landing_FormSide extends React.Component{
    render(){
        return(
            <div className="App__Form">
                <PageSwitcher />

                <div className="FormTitle">
                    <a href='#' className='FormTitle__Link'>Sign In</a>
                     or
                    <a href='#' className="FormTitle__Link FormTitle__Link--Active">Sign Up</a>
                </div>
                <SignUp />
                /* Havent included <SignIn /> here otherwise it'd be visible */
            </div>
        );
    }
}

登录/注册：

class SignUp extends React.Component{
    state = {
        active: false
    }

    render(){
        return(
               ...content...
        );
    }
}

Answer 1

您应该在父组件中具有如下状态：

const SignIn = ( props ) => {
    return (
        <form>
            <input name="name" type="text"/>
            <input name="password" type="password"/>
            <button type="submit">Sign in</button>
        </form>
    )
}

const SignUp = ( props ) => {
    return (
        <form>
            <input name="name" type="text"/>
            <input name="last_name" type="text"/>
            <input name="password" type="password"/>
            <button type="submit">Sing up</button>
        </form>
    )
}

class Parent extends React.Component{
    state = {
        visibleLogin: true
    }

    constructor( props ){
        super( props );
        this.handleVisible = this.handleVisible.bind(this);
    }

    handleVisible( value ){
        this.setState({
            visibleLogin: value
        });
    }

    render(){
        return (
            <div>
                <button onclick={this.handleVisible(true)}>Sign in</button>
                <button onclick={this.handleVisible(false)}>Sign up</button>
                { visibleLogin?<SignIn/>
                :<SignUp/>
                }
            </div>
        )
    }

}

否则，您可以将Redux用于更复杂的状态序列管理。

反应：在可见和不可见之间切换两个组件

1 个答案: