Question

我有Layout，Header和LogIn Component，其中Layout是Header的父级，而Header包含<Link>到LogIn组件。现在我要传递的是从布局组件到LogIn的道具。这是我的布局组件：

signup(email, password) {
    return this.handleAuth(when(request({
        url: 'http://localhost:3001/users',
        method: 'POST',
        crossOrigin: true,
        type: 'json',
        data: {
            "user":{"email":email,"password":password}            }
    })));
}



handleAuth(loginPromise) {
    return loginPromise
        .then(function(response){
            jwt = response.jwt;
            localStorage.setItem('jwt', jwt);
            this.setState({isLoggedIn:true});
        });
}

render() {
    return (
        <div className="App">
            <div className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h2>Welcome to React on Rails API</h2>
            </div>
            <Body />
            <Header signUp={this.signup.bind(this)} logIn={this.login.bind(this)}/><br/><br/>
            <Footer/>
        </div>
    );
}

在Header组件中我可以访问两个道具，它看起来像这样：

render() {
    console.log(this.props.signUp);
    return (

        <header>
            <br/>
            <div className="container">
                <div className="row">
                    <Link to='login' className="button six columns">SignIn</Link>
                    <Link to='signup' className="button six columns">SignUp</Link>
                </div>
            </div>
        </header>
    );
}

现在我想要的是将此道具传递给我的注册组件以访问this.props.signUp。

  signup(e) {
    e.preventDefault();
    console.log(this.state.registerValues);
    this.props.signUp(this.state.registerValues.email,this.state.registerValues.password, this.state.registerValues.conform)
        .catch(function(err) {
            console.log("Error logging in", err);
        });
}

render() {
    return (
    <div className="row">
        <div className="three column"></div>
        <div className="six columns">
            <h1>Signup</h1>
            <form>
                <div className="form-group">
                    <label htmlFor="username">Email</label>
                    <input type="text" value={this.state.registerValues['email']} onChange={this.handleChangeevent.bind(this)} className="form-control" name="email" placeholder="email" required/>
                </div>
                <div className="form-group">
                    <label htmlFor="password">Password</label>
                    <input type="password" value={this.state.registerValues['password']} onChange={this.handleChangeevent.bind(this)} className="form-control" name="password" id="password" ref="password" placeholder="Password" required />
                </div>
                <div className="form-group">
                    <label htmlFor="password">Password again</label>
                    <input type="password" value={this.state.registerValues['conform']} onChange={this.handleChangeevent.bind(this)} className="form-control" name="conform" placeholder="Password again" required/>
                </div>
                <button type="submit" className="btn btn-default" onClick={this.signup.bind(this)}>Submit</button>
            </form>
        </div>
        <div className="three column"></div>
    </div>

    );
}

我不确定这是正确的做法还是遗漏了什么？因为这是我的学习项目，首先是React寻找一些建议。

Answer 1

基本上，您无法通过链接组件传递方法。您可以在渲染Route组件时传递方法，但除此之外，您可以执行其他操作。 Example

如果您能够通过反应组件的结构实现这一点，那太好了！如果没有，我建议您考虑使用某种发布/子功能，例如redux（如果您的需求足够简单，可以自行推送）。

从父组件传递道具，其中链接到反应路由器v4中的子组件

1 个答案: