子组件中的React和方法

Question

我正在尝试学习React。 在我的App.jsx中，我设置了路由。 他们工作。 我的组件之一是登录组件。 当我点击登录按钮时，我需要在该应用上触发一个偶数。 因此，我创建了一个函数，并希望将一个参数传递给SignIn组件，以便可以从登录时调用事件。但是我不确定如何使用路由将该函数传递给组件。

export default class App extends React.Component {

    handleLogin() {
        console.log("Ahhhh")
    }

    render() {
        return (
            <div>
                <Router>
                    <div>
                        <Route exact path='/' component={Home} />
                        <Route path='/about' component={About} />
                        <Route path='/contact' component={Contact} />
                        <Route path="/signin" component={SignIn} />
                        <Route path="/register" component={Register} />
                    </div>
                </Router>
                <Footer />

            </div>
        )
    }
}

我的登录页面是：

export default class SignIn extends Component {
    render() {
        return (
            <div>
            <Navbar />
            <div className="row justify-content-md-center">
                <div className="col-lg-4">
                    <SignInBox  /> 
                </div>
            </div>   
            </div>
        )
    }
}

在这里，我认为我可以使用道具来获取方法，然后将其传递给我的登录框。

我的登录框是表单，在这里，我想将用户名和密码传递回App进行验证。 我需要将其添加到App，因为我想更新导航栏以隐藏登录按钮，并显示注销按钮。

export default class SignInBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            rememberme: true
        }

        this.handleSignin = this.handleSignin.bind(this);
    }

    handleSignin(event) {
        event.preventDefault();

        this.setState(
            {
                username: this.refs.username.value,
                password: this.refs.password.value
            }, () => console.log(this.state)
        );
    }

    render() {
        return (
            <div>
                <div className="container">
                    <div className="form-signin">
                        <control-label for="inputEmail" className="sr-only">Email address</control-label>
                        <input type="email" ref="username" id="inputEmail" className="form-control" placeholder="Email address" required autoFocus />
                        <control-label for="inputPassword" className="sr-only">Password</control-label>
                        <input type="password" ref="password" id="inputPassword" className="form-control" placeholder="Password" required />
                        <div className="checkbox">
                            <control-label>
                                <input type="checkbox" /> Remember me
                            </control-label>
                        </div>
                        <button className="btn btn-lg btn-primary btn-block" type="button" onClick={this.handleSignin}>Sign in</button>
                        <div className="footer-text"><Link to="/"> Forgotten Password?</Link></div>
                    </div>
                </div>
            </div>
        );
    }
}

我认为在应用程序中拥有登录方法是错误的，因为应该将其限制在Singin页面中-但是我该如何更新导航栏？ App.jsx是所有组件的父级。

（工作代码： https : //github.com/CraigInBrisbane/ReactLearning ）

我该如何处理。

Answer 1

而不使用component使用render ，而是检查DOC是否存在差异。

通过这样的函数：

<Route 
    path="/signin" 
    render={props => <SignIn validate={this._validate} {...props} />} 
/>

在SignIn组件内部，您可以通过this.props.validate()访问函数

建议 ：更好的方法是使用redux/flux进行数据管理，这将帮助您传递和访问不同页面的数据，以及在其他各种情况下。

检查Redux文档 。

Answer 2

您可以像这样从父级发送函数：

class App extends Component{
    constructor(props){
        super(props);
        this.someFn = this.someFn.bind(this);
    }
    function someFn(data){
        ...do something...
    }
    render(){
        return(
          <div>
              <Route path="/example" render={() => {
                    <Child someFn={this.someFn} />;
                }} />
           </div>
        )
     }
}

子组件如下：

class Child extends Component{
    render(){
       <div onClick={this.props.someFn(this, data)}>

       </div>
    }
}