React 意外调用 function

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() function。 查看我的代码，我只设置了 onClick 来调用submit function。

我的代码有问题吗？

编辑：删除 classNames 以便于查看

Answer 1

尝试：

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

    const onSubmit = () => {
       submit(user,pass)
    }

    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={onSubmit}>
                Submit
            </button>
        </div>
    );
};

Answer 2

您在每次渲染时都调用submit function。 onClick 需要一个 function，但你是直接调用一个 function。

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

将被替换为

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