面试题：React中如何在表单验证中利用条件渲染处理必填字段提示

Question

假设你有一个包含用户名和密码的表单，用户名是必填字段。请用React实现，当用户未输入用户名且尝试提交表单时，通过条件渲染在用户名输入框旁边显示 '用户名是必填的' 提示信息。

Answer 1

import React, { useState } from 'react';

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [showError, setShowError] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!username) {
      setShowError(true);
    } else {
      // 处理表单提交逻辑
      console.log('用户名:', username, '密码:', password);
      setShowError(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        用户名:
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
        {showError && <span style={{ color: 'red' }}>用户名是必填的</span>}
      </label>
      <br />
      <label>
        密码:
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
};

export default LoginForm;