React неожиданно вызывает функцию

Question

Вот мой компонент Login:

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

попробуй:

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 для каждого рендера. OnClick принимает функцию, но вы напрямую вызываете функцию.

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

будет заменено на

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

Answer 3

onClick={()=>submit(user, pass)} и вы хороши для go.