首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在这种形式的验证中,是否存在反应18的问题?

在这种形式的验证中,是否存在反应18的问题?
EN

Stack Overflow用户
提问于 2022-04-21 16:37:30
回答 1查看 337关注 0票数 0

在表单验证中,我使用Handel change,问题是它在输入值和状态变化中没有显示单个值,最后在提交时没有显示答案是否是react 18版本的问题.imagehttps://drive.google.com/file/d/1s1uvHR7LrDOh1Ud2_hBzuFXum-MWYBHh/view?usp=sharing

代码语言:javascript
复制
import React, { useEffect, useState } from "react";
export default function App() {
    const [data, setData] = useState({
        name: "",
        password: "",
    });

    function handlechange(e) {
        let { name, value } = e.target;
        return setData({ ...data, [name]: value }), console.log(data);
    }

    const onSubmithandeler = (e) => {
        let names = data.name;
        let passwords = !data.password.match(1);
        if (!names) {
            console.log("invalide name");
        } else if (!passwords) {
            console.log("password invalid");
        } else if (!names || !passwords) {
            console.log("all err");
        } else {
            setData(...data);
            console.log(...data);
        }
        e.preventDefault();
    };

    return (
        <div style={{ fontFamily: "roboto" }}>
            <nav
                className="font-lg w-full
 text-white flex font-bold justify-start bg-blue-700 sticky"
            >
                <h3 className="m-1 p-2">Ecomerce</h3>
                <h3 className="m-1 p-2">Login</h3>
                <h4 className="m-1 p-2">Register</h4>
            </nav>
            <div className="bg-gray-300">
                <div className="w-full h-screen flex items-center justify-center">
                    <form
                        onSubmit={onSubmithandeler}
                        className="w-full md:w-1/3 bg-white rounded-lg"
                    >
                        <div className="flex font-bold justify-center mt-6">
                            <img
                                className="h-20 w-20"
                                src="https://cdn.pixabay.com/photo/2018/11/13/21/43/avatar-3814049_960_720.png"
                            />
                        </div>
                        <h2 className="text-3xl text-center text-gray-700 mb-4">
                            Login Form
                        </h2>
                        <div className="px-12 pb-10">
                            <div className="w-full mb-2">
                                <div className="flex items-center">
                                    <input
                                        type="text"
                                        name="name"
                                        value=""
                                        onChange={handlechange}
                                        placeholder="Username"
                                        className="-mx-6 px-8  w-full border rounded px-3 py-2 text-gray-700 focus:outline-blue-400"
                                    />
                                </div>
                            </div>
                            <div className="w-full mb-2">
                                <div className="flex items-center">
                                    <input
                                        type="text"
                                        placeholder="Password"
                                        value=""
                                        name="password"
                                        onChange={handlechange}
                                        className="-mx-6 px-8 w-full border rounded px-3 py-2 text-gray-700 focus:outline-blue-400"
                                    />
                                </div>
                            </div>
                            <div className="flex items-center ">
                                <input
                                    type="checkbox"
                                    className=" m-2 p-2 float-right focus:outline-blue-400"
                                />
                                <a
                                    href="#"
                                    className="text-xs m-2 p-2 text-gray-500 float-right "
                                >
                                    Forgot Password?
                                </a>
                            </div>
                            <button
                                type="submit"
                                value="Submit"
                                className="w-full py-2 rounded-full bg-green-600 text-gray-100  focus:outline-green-400"
                            >
                                Log In
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-04-22 09:58:09

问题-解决如果值-{data.something}

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71957956

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档