javascript - React意外调用函数

Question

这是我的登录组件：

const Login = () => {
    const [user, setUser] = useState("");
    const [pass, setPass] = useState("");

    return (
        <div>
            <p>Login</p>
            <input
                type="text"
                onChange={(e) => {
                    setUser(e.target.value);
                }}
            />
            <input
                type="password"
                onChange={(e) => {
                    setPass(e.target.value);
                }}
            />


            <button onClick={submit(user, pass)}>
                Submit
            </button>
        </div>
    );
};

它呈现在我的网页上，但是每当我输入以下两个内容时，它就会调用submit()函数：文本和密码。查看我的代码，我仅将onClick设置为调用submit函数。

我的代码有问题吗？

编辑：删除classNames以便于查看

Answer 1

您正在每个渲染上调用submit函数。 onClick带有一个函数，但是您正在直接调用一个函数。

<button onClick={submit(user, pass)}>
   Submit
</button>

将被替换

<button onClick={()=>submit(user, pass)}>
   Submit
</button>