React中登录按钮输入为空时错误提示失效问题求助

你的代码里有几个关键问题导致错误提示无法正常生效，下面逐一说明并修复：

1. 输入框状态更新逻辑错误 #

两个输入框共用同一个handleChange函数，但你错误使用了不存在的e.target.valueName和e.target.valueLast属性，而且没有区分不同输入框，导致不管修改哪个输入框，都会同时更新两个状态值，状态完全混乱。

修复方法：给每个输入框添加name属性，在handleChange里通过e.target.name区分要更新的状态：

const handleChange =(e) => {
  const { name, value } = e.target;
  if(name === 'valueName') {
    setValueName(value);
  } else if(name === 'valueLast') {
    setValueLast(value);
  }
}

同时给两个input加上对应的name属性：

<input 
  className="inputModal"
  type="text" 
  placeholder="用户名..."
  onChange={handleChange}
  value={valueName}
  name="valueName" // 新增name属性
/>
<input className="inputModal" 
  type="email" 
  placeholder="密码..."
  onChange={handleChange}
  value={valueLast}
  name="valueLast" // 新增name属性
/>

2. 空值判断条件错误 #

你用了!valueName && !valueLast，这个条件只有当两个输入框都为空时才触发错误提示，但实际需求应该是只要有一个为空就提示，所以要把&&改成||：

if(!valueName || !valueLast) {
  Swal.fire({
    icon: "error",
    text: "请输入您的信息!"
  }); 
}

3. 弹窗强制关闭导致提示一闪而过 #

不管验证成功还是失败，你最后都会执行setValueName('')、setValueLast('')和onClose(null)，这会导致弹窗直接关闭，错误提示刚弹出来就消失了。需要把这些代码移到else分支里，只有登录成功时才清空状态并关闭弹窗：

const clickToLogIn = () => {
  if(!valueName || !valueLast) {
    Swal.fire({
      icon: "error",
      text: "请输入您的信息!"
    }); 
    return; // 阻止后续代码执行
  } else {
    Swal.fire("登录成功!");
    setValueName('')
    setValueLast('')
    onClose(null)
  }
}

4. 语法错误：handleChange函数未闭合 #

你的handleChange函数少了一个闭合的}，导致代码语法错误，这也是功能异常的原因之一，修复后要确保函数结构完整。

修复后的完整代码 #

import { useState } from 'react';
import Swal from 'sweetalert2';

function ModalLogIn ({open, onClose }) {
    const [valueName, setValueName] = useState('');
    const [valueLast, setValueLast] = useState('');

    const clickToLogIn = () => {
        if(!valueName || !valueLast) {
            Swal.fire({
                icon: "error",
                text: "请输入您的信息!"
            }); 
            return;
        } else {
            Swal.fire("登录成功!");
            setValueName('')
            setValueLast('')
            onClose(null)
        }
    }

    const handleChange =(e) => {
        const { name, value } = e.target;
        if(name === 'valueName') {
            setValueName(value);
        } else if(name === 'valueLast') {
            setValueLast(value);
        }
    }

    if(!open) return null;
    return (
        <div onClick={onClose} className="overlay">
            <div onClick={(e) => {
                e.stopPropagation();
            }} className="modalContainer">
                <div className="modalRight">
                    <img className='icon' src={logIn} alt='icon'/>
                    <button className="closeBtn" onClick={onClose}>X</button>
                </div>
                <div className="content">
                    <p>登录</p>
                    <input 
                        className="inputModal"
                        type="text" 
                        placeholder="用户名..."
                        onChange={handleChange}
                        value={valueName}
                        name="valueName"
                    />
                    <input className="inputModal" 
                        type="email" 
                        placeholder="密码..."
                        onChange={handleChange}
                        value={valueLast}
                        name="valueLast"
                    />
                    <button className='btnLog' onClick={clickToLogIn}>登录</button>
                </div>
            </div>
         </div>
    )
}
export default ModalLogIn;

内容的提问来源于stack exchange，提问作者Rodika Aryku