错误警报在按钮功能与反应中的输入连接中不起作用

Question

我有一个登录按钮，单击它时会出现一条警报，提示登录已成功，但如果输入为空，我会尝试添加错误警报，提示请输入您的信息，但它不起作用。谁能帮我解决一下。 谢谢。

下面是我的代码：

函数 ModalLogIn ({open, onClose }) {

const [valueName, setValueName] = useState('');
const [valueLast, setValueLast] = useState('');

const clickToLogIn = () => {
    if(!valueName && !valueLast) {
        Swal.fire({
            icon: "error",
            text: "Please enter your information!"
        }); 
    }
    else{
        Swal.fire("Your login was successful!");
    }

    setValueName('')
    setValueLast('')
    onClose(null)
}

const handleChange =(e) => {
     setValueName (e.target.valueName)
     setValueLast(e.target.valueLast)
   
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>Log in</p>
                <input 
                    className="inputModal"
                    type="text" 
                    placeholder="User name..."
                    onChange={handleChange}
                    value={valueName}
                />
                <input className="inputModal" 
                    type="email" 
                    placeholder="Password..."
                    onChange={handleChange}
                    value={valueLast}
                />
                <button className='btnLog' onClick={clickToLogIn}>Log in</button>
            </div>
        </div>
     </div>
)

} 导出默认的 ModalLogIn;

Answer 1

这是对您的错误的解释。 handleChange 函数错误地尝试从同一事件设置 valueName 和 valueLast。每个输入都应该有自己的 onChange 处理程序。 handleChange 函数无法区分两个输入。 每次尝试登录后都会以 null 调用 onClose 函数，这可能不是预期的行为。 即使出现错误，您也会重置输入值并关闭模式。

这是修复版本

import React, { 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: "Please enter your information!"
            });
        } else {
            Swal.fire("Your login was successful!");
            setValueName('');
            setValueLast('');
            onClose(null);
        }
    };

    const handleNameChange = (e) => {
        setValueName(e.target.value);
    };

    const handleLastChange = (e) => {
        setValueLast(e.target.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>Log in</p>
                    <input
                        className="inputModal"
                        type="text"
                        placeholder="User name..."
                        onChange={handleNameChange}
                        value={valueName}
                    />
                    <input
                        className="inputModal"
                        type="password"
                        placeholder="Password..."
                        onChange={handleLastChange}
                        value={valueLast}
                    />
                    <button className='btnLog' onClick={clickToLogIn}>Log in</button>
                </div>
            </div>
        </div>
    );
}

export default ModalLogIn;