javascript - SignUp 和 SignIn 组件之间的路由

Question

这是我的内容包装器，它将显示 SignUp 组件或 SignIn 组件。

const Content = (props) => {
    return (
        <div className="wrapper">

                <SignIn/>
                <SignUp/>

        </div>
    )
};
export default Content;

这是我的注册组件

class SignUp extends React.Component {
    state = {
        email: '',
        username: '',
        password: '',
        second_password: '',
        showModal: false,
        modalMessage: '',
        modalHeader: ''
    };
    handleSubmit = async (event) => {
        event.preventDefault();

        const emailValidated = await this.validateEmail(this.state.email);
        const usernameValidated = this.validateUsername(this.state.username);
        const passwordValidated = this.validatePassword(this.state.password, this.state.second_password);
        if (emailValidated === true){
            if(usernameValidated === true){
                if(passwordValidated === true){
                    const registrationComplete = await this.register(this.state.email, this.state.username, this.state.password);
                    if (registrationComplete === true) {
                        this.setState(prevState => ({
                            ...prevState,
                            showModal: true,
                            modalMessage: "Please check your mail to activate your account",
                            modalHeader: "Success!"
                        }));
                    }else{
                        this.setState(prevState => ({
                            ...prevState,
                            showModal: true,
                            modalMessage: "Something went wrong with the registration. Please try again later.",
                            modalHeader: "Failure!"
                        }));
                    }
                }else{
                    this.setState(prevState => ({
                        ...prevState,
                        showModal: true,
                        modalMessage: "Passwords do not match",
                        modalHeader: "Failure!"
                    }));
                }

            }else{
                this.setState(prevState => ({
                    ...prevState,
                    showModal: true,
                    modalMessage: "Username should be a minimum of 8 characters long",
                    modalHeader: "Failure!"
                }));
            }

        }else{
            this.setState(prevState => ({
                ...prevState,
                showModal: true,
                modalMessage: "An account with that email already exists.",
                modalHeader: "Failure!"
            }));
        }

    };
    validateUsername = (username) => {
        return username.trim().length >= 8;
    };

    validatePassword = (password, second) => {
        return password.trim() === second.trim();
    };

    validateEmail = async (email) => {
        const resp = await axios({
            method: 'post',
            url: 'bouncr/user/exists',
            data: {"email": email}
        });
        return resp.status === 200
    };

    register = async (email, username, password) => {
        const resp = await axios({
            method: 'post',
            url: 'bouncr/user/register',
            data: {'email': email, 'username': username, 'password': password}

        });
        return resp.status === 201
    };
    onClose = () => {
        this.setState(prevState => ({...prevState, showModal: false, modalMessage: '', modalHeader: ''}));
    };

    render() {
        return (
            <div>
                <CustomModal
                    showModal={this.state.showModal}
                    onClose={this.onClose}
                    modalMessage={this.state.modalMessage}
                    modalHeader={this.state.modalHeader}
                />

                <div className="register">
                    <h1>Sign Up</h1>
                    <Form onSubmit={this.handleSubmit}>
                        <Form.Group controlId="email">
                            <Form.Label>Email address</Form.Label>
                            <Form.Control type="email"
                                          placeholder="Enter email"
                                          value={this.state.email}
                                          onChange={event => this.setState({email: event.target.value})}/>
                            <Form.Text className="text-muted">
                                Please make sure you've access to this mail. You'll receive an activation code here.
                            </Form.Text>
                        </Form.Group>

                        <Form.Group controlId="username">
                            <Form.Label className="form-label">Username</Form.Label>
                            <Form.Control type="text"
                                          placeholder="Username"
                                          value={this.state.username}
                                          onChange={event => this.setState({username: event.target.value})}/>
                            <Form.Text className="text-muted">
                                Please make it atleast 8 characters long.
                            </Form.Text>
                        </Form.Group>

                        <Form.Group controlId="password">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password"
                                          placeholder="Password"
                                          value={this.state.password}
                                          onChange={event => this.setState({password: event.target.value})}/>
                            <Form.Text className="text-muted">
                                Please make sure it's atleast 8 characters long and uses a mix of letters and numbers.
                            </Form.Text>
                        </Form.Group>

                        <Form.Group controlId="confirmPassword">
                            <Form.Label>Confirm Password</Form.Label>
                            <Form.Control type="password"
                                          placeholder="Password"
                                          value={this.state.second_password}
                                          onChange={event => this.setState({second_password: event.target.value})}/>
                        </Form.Group>


                        <Button variant="primary" type="submit">
                            Sign Up
                        </Button>
                        <hr/>
                        <p onClick={() => this.props.setIsNew(false)}>
                            If you don't have an account, Sign Up
                        </p>
                    </Form>
                </div>
            </div>
        );
    }
}

export default SignUp;

这是 SignIn 组件。

const SignIn = () => {
    return (
        <div className="sign-up">
            <h1>Sign In</h1>
            <Form>
                <Form.Group controlId="email">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control type="email" placeholder="Enter email"/>
                    <Form.Text className="text-muted">
                    </Form.Text>
                </Form.Group>

                <Form.Group controlId="password">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Password"/>
                </Form.Group>
                <Form.Group controlId="formBasicCheckbox">
                    <Form.Check type="checkbox" label="Remember me"/>
                </Form.Group>
                <Button variant="primary" type="submit">
                    Sign In
                </Button>
                <hr/>
                <p>If you don't have an account, Sign Up</p>
            </Form>

        </div>
    )
};
export default SignIn;

我希望按钮下方的文本路由到相关组件。我如何使用 React 路由器做到这一点？

Answer 1

管理父组件中的状态。这是使用钩子(Hook)的基本示例。该组件将根据其状态确定渲染哪个子组件。

const Content = props => {
  const [isNew, setIsNew] = useState(true);

  return (
    <div className="wrapper">
      {isNew ? <SignUp setIsNew={setIsNew} /> : <SignIn setIsNew={setIsNew} />}
    </div>
  );
};

export default Content;

将 setIsNew 传递给子级并使用适当的 bool 值进行调用。我们传递此函数并将其绑定(bind)到 onClick 处理程序。

const SignIn = ({setIsNew}) => {
  return (
    <div className="sign-up">
      <h1>Sign In</h1>
      <Form>
        <Form.Group controlId="email">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="Enter email" />
          <Form.Text className="text-muted"></Form.Text>
        </Form.Group>

        <Form.Group controlId="password">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" placeholder="Password" />
        </Form.Group>
        <Form.Group controlId="formBasicCheckbox">
          <Form.Check type="checkbox" label="Remember me" />
        </Form.Group>
        <Button variant="primary" type="submit">
          Sign In
        </Button>
        <hr />
        <p onClick={() => setIsNew(true)}>
          If you don't have an account, Sign Up
        </p>
      </Form>
    </div>
  );
};
export default SignIn;

与登录相同。

const SignUp = ({setIsNew}) => {
  return (
    <div className="sign-up">
      <h1>Sign In</h1>
      <Form>
        <Form.Group controlId="email">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="Enter email" />
          <Form.Text className="text-muted"></Form.Text>
        </Form.Group>
        <Form.Group controlId="username">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="Username" />
          <Form.Text className="text-muted"></Form.Text>
        </Form.Group>

        <Form.Group controlId="password">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" placeholder="Password" />
        </Form.Group>

        <Form.Group controlId="confirmPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" placeholder="Confirm Password" />
        </Form.Group>
        <Button variant="primary" type="submit">
          Sign In
        </Button>
        <hr />

        <p onClick={() => setIsNew(false)}>
          If you don't have an account, Sign Up
        </p>
      </Form>
    </div>
  );
};
export default SignUp;