javascript - 子组件中的 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>
        )
    }
}

这里我想我可以使用 props 来获取方法，然后将其传递到我的登录框。

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

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

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

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>
    }
}