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

在这里，我想我可以使用道具来获取方法，然后将其传递给我的Signin Box。

我的登录框是表单，在这里，我想将用户名和密码传回给应用程序进行验证。我需要将它送到App，因为我想更新我的导航栏以隐藏登录按钮，并显示一个Logout按钮。

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 Docs 。

Answer 2

您可以从父发送功能，如下所示：

<div style="width:300px;height:300px;">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300">
        <g>
            <rect  width="14.55" height="40%" x="0" y="0" fill="black"></rect>
            <rect  width="14.55" height="20%" x="50" y="0" fill="green"></rect>
            <rect  width="14.55" height="80%" x="100" y="0" fill="red"></rect>
            <rect  width="14.55" height="90%" x="150" y="0" fill="yellow"></rect>
            <rect  width="14.55" height="10%" x="200" y="0" fill="pink"></rect>
            <rect  width="14.55" height="60%" x="250" y="0" fill="orange"></rect>
        </g>
    </svg>
</div>

子组件如下：

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

子组件内的React和方法

2 个答案: