Cattivi modi che probabilmente stai usando react | parte 1 | useState e moduli ✏️ ✅

Quando imposti un modulo in react/react native, probabilmente stai impostando uno stato per ogni input nel modulo.

Qualcosa come questo

import React, {useState} from "react";

function LoginForm() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const handleSubmit = event => {
        event.preventDefault();
        console.log("Email:", email);
        console.log("Password:", password);
        // You can add your own logic here for submitting the form data
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Email:
                <input
                    type="email"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                />
            </label>
            <br />
            <label>
                Password:
                <input
                    type="password"
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                />
            </label>
            <br />
            <button type="submit">Submit</button>
        </form>
    );
}

export default LoginForm;

import React, {useRef} from "react";

function LoginForm() {
    const emailRef = useRef();
    const passwordRef = useRef();

    const handleSubmit = event => {
        event.preventDefault();
        console.log("Email:", emailRef.current.value);
        console.log("Password:", passwordRef.current.value);
        // You can add your own logic here for submitting the form data
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Email:
                <input type="email" ref={emailRef} />
            </label>
            <br />
            <label>
                Password:
                <input type="password" ref={passwordRef} />
            </label>
            <br />
            <button type="submit">Submit</button>
        </form>
    );
}

export default LoginForm;

Circa l'autore

io sono Gab. Scrivo react native da oltre 5 anni e sono uno sviluppatore mobile a tempo pieno di alto livello su Upwork . Seguimi su Twitter per meme, tweet e sondaggi giornalieri. ⭐️ Dai una stella al mio modello nativo di reazione