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函数。我的代码有问题吗？

Answer 1

submit您在每次渲染时都调用该函数。onClick 接受一个函数，但您是直接调用一个函数。

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

   Submit

</button>

将被替换为

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

   Submit

</button>

Answer 2

尝试 ：

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>

    );

};