子組件中的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>
    }
}