React点击验证按钮无错误时条件渲染OtpInput组件

你当前的代码存在两个核心问题：一是渲染OTP组件的条件写反了，二是缺少状态区分「初始状态」和「点击验证按钮且邮箱有效」的场景——初始状态下emailError本来就是空的，不能直接用它判断是否显示OTP。

具体修改步骤 #

1. 新增状态变量：添加isEmailVerified来标记邮箱是否通过验证

const [isEmailVerified, setIsEmailVerified] = useState(false);

2. 更新验证逻辑：在handleVerifyEmail中，根据邮箱有效性更新验证状态

const handleVerifyEmail = (): void => {
  if (email) {
    setEmailError('');
    setIsEmailVerified(true); // 邮箱有效，标记验证通过
  } else {
    setEmailError('Please enter your email.');
    setIsEmailVerified(false); // 邮箱无效，重置验证状态
  }
};

3. 调整渲染条件：根据isEmailVerified的值决定是否渲染OTP组件

{isEmailVerified ? (
  <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>
)}

修改后的完整代码 #

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('');
  // 新增状态：标记邮箱是否验证通过
  const [isEmailVerified, setIsEmailVerified] = useState(false);
  // Multi-factor authentication.
  const [otp, setOtp] = useState('');
  const onChangeOtp = (value: string) => setOtp(value);

  const handleVerifyEmail = (): void => {
    if (email) {
      setEmailError('');
      setIsEmailVerified(true);
    } else {
      setEmailError('Please enter your email.');
      setIsEmailVerified(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>
      {/* 根据验证状态渲染OTP组件 */}
      {isEmailVerified ? (
        <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;
}

补充说明 #

• isEmailVerified状态专门跟踪「点击验证按钮且邮箱有效」的动作，避免了初始状态和验证通过状态的混淆
• 每次点击验证按钮都会更新该状态，保证UI交互逻辑的一致性

内容的提问来源于stack exchange，提问作者Ali Celebi