reactjs React以有条件地呈现另一个组件

kb5ga3dv 于 2023-05-06 发布在 React

关注(0)|答案(2)|浏览(148)

我是React世界的新手。我有以下功能组件的登录页面。
我想它呈现OtpInput组件时，用户点击Verify Email按钮，并没有错误，即。emailError为空。

import { BaseSyntheticEvent, useState } from 'react';
import { Button } from '@fluentui/react-components';
import styles from './Login.module.scss';
import LoginField from '../../core/components/LoginField';
import OtpInput from '../../core/components/multi-factor-authentication/Multi-factor-authentication';

export default function Login(): JSX.Element {
  const [email, setEmail] = useState('');
  const [emailError, setEmailError] = useState('');
  // Multi-factor authentication.
  const [otp, setOtp] = useState('');
  const onChangeOtp = (value: string) => setOtp(value);

  const handleVerifyEmail = (): void => {
    if (email) {
      setEmailError('');
    } else if (!email) {
      setEmailError('Please enter your email.');
    }
  };

  const div = (
    <div className={styles.loginContainer}>
      <div className={styles.loginSection}>
        <div className={styles.loginControls}>
          <div className={styles.logoContainer}>
            <div className={styles.logo} />
            <h1 color="secondary">Alytic</h1>
          </div>
          <LoginField
            title="Email"
            required
            size="large"
            onChange={(e: BaseSyntheticEvent) => setEmail(e.target.value)}
            validationState={emailError ? 'error' : undefined}
            validationMessage={emailError}
            label="Email"
          />
          <Button onClick={handleVerifyEmail}>Verify Email</Button>
        </div>
      </div>
      {emailError !== '' ? (
        <div>
          <h1>Enter your code</h1>
          <h3>Enter the 6-digit security code from your authenticator app.</h3>
          <OtpInput value={otp} valueLength={6} onChange={onChangeOtp} />
          <Button appearance="primary" shape="rounded" size="medium">
            Continue
          </Button>
        </div>
      ) : (
        <div>
          <p>Test</p>
        </div>
      )}
      <div className={styles.loginImage} />
    </div>
  );

  return div;
}

reactjs

来源：https://stackoverflow.com/questions/76163719/react-to-render-another-component-condionally

2条答案

按热度按时间

yvgpqqbh1#

原因是因为如果电子邮件是好的，emailError !== ''将是假的。有一个单独的状态来标记电子邮件是否经过验证。保留emailError仅用于验证消息。

import { BaseSyntheticEvent, useState } from "react";
import { Button } from "@fluentui/react-components";
import styles from "./Login.module.scss";
import LoginField from "../../core/components/LoginField";
import OtpInput from "../../core/components/multi-factor-authentication/Multi-factor-authentication";

export default function Login(): JSX.Element {
  const [email, setEmail] = useState("");
  const [emailError, setEmailError] = useState("");
  // Multi-factor authentication.
  const [otp, setOtp] = useState("");
  const onChangeOtp = (value: string) => setOtp(value);
  const [isVerified, setIsVerified] = useState(false);

  const handleVerifyEmail = (): void => {
    if (email) {
      setIsVerified(true);
      setEmailError("");
    } else {
      setEmailError("Please enter your email.");
      setIsVerified(false);
    }
  };

  const div = (
    <div className={styles.loginContainer}>
      <div className={styles.loginSection}>
        <div className={styles.loginControls}>
          <div className={styles.logoContainer}>
            <div className={styles.logo} />
            <h1 color="secondary">Alytic</h1>
          </div>
          <LoginField
            title="Email"
            required
            size="large"
            onChange={(e: BaseSyntheticEvent) => setEmail(e.target.value)}
            validationState={emailError ? "error" : undefined}
            validationMessage={emailError}
            label="Email"
          />
          <Button onClick={handleVerifyEmail}>Verify Email</Button>
        </div>
      </div>
      {isVerified ? (
        <div>
          <h1>Enter your code</h1>
          <h3>Enter the 6-digit security code from your authenticator app.</h3>
          <OtpInput value={otp} valueLength={6} onChange={onChangeOtp} />
          <Button appearance="primary" shape="rounded" size="medium">
            Continue
          </Button>
        </div>
      ) : (
        <div>
          <p>Some Text Here</p>
        </div>
      )}
      <div className={styles.loginImage} />
    </div>
  );

  return div;
}

赞(0）回复(0）举报 2023-05-06

e5nszbig2#

您可以使用Ternary Operator来有条件地呈现组件。
在函数中定义条件的逻辑，然后定义一个布尔变量来保存条件的状态，并在呈现组件之前使用该变量来检查和评估条件。
请查看下面的文章，以获得更多关于react Conditional Rendering in React中条件渲染的见解

赞(0）回复(0）举报 2023-05-06