在子组件中设置 prop 的值并将值传回 app.js 的状态，反应

Question

我觉得这很简单，只是我缺乏使用 react.js 的经验，但我有我的 app.js 文件，它的状态值为 isUserLoggedIn，我将其传递到我的登录.js 文件作为道具。

这些值正在进入登录页面，因为我可以在那里使用条件来相应地呈现或 console.log。

但是，我似乎无法弄清楚如何（使用 Login.js 中的 handleSubmit 函数）将 props 中的 loggedIn 值设置为 true 并传回 app.js 文件。

我正在使用它在 app.js 中进行有条件的渲染，所以我需要做的就是能够更改 login.js 中loggedIn 的值并将其传递回app.js。

我该怎么做？

App.js

class App extends React.Component {

    state = { 

          isUserLoggedIn: false
    };




    render() {

            return (
                <Router>
                    <Row className={css(styles.container)}>
                        <Column flexGrow={1} className={css(styles.mainBlock)}>
                            <div className={css(styles.content)}>
                                <Switch>
                                    <Route path="/" exact component={(props) => <Login {...props} loggedIn = {this.state.isUserLoggedIn}/>} />
                                </Switch>
                            </div>
                        </Column>
                    </Row>
                </Router>
            );
        }
    }
}

export default App;

登录.js

import React, { useState } from "react";
    import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";
    import "./Login.css";

    export default function Login(props) {

        const [email, setEmail] = useState("");
        const [password, setPassword] = useState("");


        function validateForm() {
            return email.length > 0 && password.length > 0;
        }

        async function handleSubmit(event) {
            event.preventDefault();

            try{
                props.history.push("/");
            }catch (e) {
                alert(e.message);
            }
        }

        return(
            <div className="Login">
                <form onSubmit={handleSubmit}>
                    <FormGroup controlId="email" bsSize="large">
                        <FormLabel>Email</FormLabel>
                        <FormControl 
                            autoFocus
                            type="email"
                            value={email}
                            onChange={e => setEmail(e.target.value)}
                        />
                    </FormGroup>
                    <FormGroup controlId="password" bsSize="large">
                        <FormLabel>Password</FormLabel>
                        <FormControl 
                            value={password}
                            onChange={e => setPassword(e.target.value)}
                            type="password"
                        />
                    </FormGroup>
                    <Button bsSize="large" disabled={!validateForm()} type="submit">
                        Login
                    </Button>
                </form>
            </div>
        );
    }

Answer 1

您需要将一个函数从 app.js 传递给 Login.js。同样在 app.js 中，状态应该由组件处理，这意味着您可以将其放入构造函数中。

App.js

class App extends React.component{
    constructor(props){
        super(props);
        this.state = {
            isLoggedIn: false
        }
    }

    handleLogin = () => {
        //add your logic here

        this.setState({
            isLoggedIn: true
        })        
    }

    render(){
        <div>
            <Route path="/" exact component={(props) => <Login {...props} handleLoggedIn = {this.handleLogin}/>} />
        </div>

    }
}

登录.js

export default function Login(props) {

    async function handleSubmit(event) {
        event.preventDefault();
        this.props.handleLoggedIn()

        try{
            props.history.push("/");
        }catch (e) {
            alert(e.message);
        }
    }
    // other parts of your code
}

在这两个组件之间，您将状态传递给 login.js，而是向下传递一个函数。点击按钮后，会触发 app.js 中的函数。因为函数设置了一个新的状态，组件将重新渲染并因此更新组件。因此，您可以获得最新状态。