Решение задания

Space of React

Решение заданияФорма контакта — Cоздание React компонентов | Max Roslow | Space of React


const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
};


<input 
    name="email"
    value={formData.email}
    onChange={handleChange}
/>


const [errors, setErrors] = useState({});

const validate = () => {
    const newErrors = {};
    if (!formData.email) {
        newErrors.email = 'Email обязателен';
    }
    return newErrors;
};


<input 
    type="checkbox"
    checked={formData.agree}
    onChange={(e) => setFormData({ ...formData, agree: e.target.checked })}
/>


function ContactForm() {
    //...
    const [errors, setErrors] = useState({});
    const [submitted, setSubmitted] = useState(false);
    
    const handleChange = (e) => {
        //...
    };
    
    const validate = () => {
        const newErrors = {};
        //...
        return newErrors;
    };
    
    const handleSubmit = (e) => {
        e.preventDefault();
        //...
    };
    
    if (submitted) {
        return (
            <div className="success-message">
                {/*...*/}
            </div>
        );
    }
    
    return (
        <form onSubmit={handleSubmit}>
            {/*...*/}
        </form>
    );
}

Войдите, чтобы смотреть видео

Форма с валидацией

Задание