Bertindak balas penggerudian sokongan alternatif (terbalikkan, anak kepada ibu bapa) cara untuk memproses borang

Question

Saya baru mengenali React dan mempelajarinya melalui beberapa projek praktikal. Saya sedang mengusahakan pemprosesan dan pengesahan borang. Saya menggunakan komponen Borang React Router dalam SPA, dan di dalam borang saya mempunyai elemen FormGroup, yang menjadikan input label dan mesej ralat. Saya juga menggunakan komponen input saya sendiri dalam komponen FormGroup untuk memisahkan logik dan pengurusan keadaan input yang digunakan dalam borang.

Jadi saya meletakkan komponen Borang dan komponen FormGroup dalam contoh halaman log masuk seperti ini:

halaman/Log Masuk.js

import { useState } daripada 'react';
import { Link, Form, useNavigate, useSubmit } daripada 'react-router-dom';

import FormGroup daripada '../components/UI/FormGroup';
import Butang daripada '../components/UI/Button';
import Kad daripada '../components/UI/Kad';

import './Login.scss';

fungsi LoginPage() {
    const navigate = useNavigate();
    const submit = useSubmit();
    const [isLoginValid, setIsLoginValid] = useState(false);
    const [isPasswordValid, setIsPasswordValid] = useState(false);
    var resetLoginInput = null;
    var resetPasswordInput = null;

    biarkan isFormValid = palsu;

    if(isLoginValid && isPasswordValid) {
        isFormValid = benar;
    }

    function formSubmitHandler(event) {
        event.preventDefault();

        if(!isFormValid) {
            kembali;
        }

        resetLoginInput();
        resetPasswordInput();

        serahkan(event.currentTarget);
    }

    function loginValidityChangeHandler(isValid) {
        setIsLoginValid(isValid);
    }

    kata laluan fungsiValidityChangeHandler(isValid) {
        setIsPasswordValid(isValid);
    }

    function resetLoginInputHandler(reset) {
        resetLoginInput = set semula;
    }

    function resetPasswordInputHandler(reset) {
        resetPasswordInput = set semula;
    }

    suis fungsiToSignupHandler() {
        navigasi('/signup');
    }

    kembali (
        

            

                Pergi Piala
            
            

                Log masuk ke akaun Go Cup anda
            
            
                
                     {
                                nilai = nilai.trim();
                                jika(!nilai) {
                                    return [palsu, 'Nama pengguna atau alamat e-mel diperlukan.']
                                } else if(value.length < 3 || value.length > 30) {
                                    return [false, 'Nama pengguna atau alamat e-mel mesti mempunyai sekurang-kurangnya 3 dan maksimum 30 aksara'];
                                } lain {
                                    kembali [benar, batal];
                                }
                            },
                            onValidityChange: loginValidityChangeHandler,
                            onReset: resetLoginInputHandler
                        }}
                    />
                    
                                lupa kata laluan?
                            
                        }
                        inputProps={{
                            jenis: "kata laluan",
                            nama: "kata laluan",
                            kesahan: (nilai) => {
                                nilai = nilai.trim();
                                jika(!nilai) {
                                    return [palsu, 'Kata laluan diperlukan.']
                                } else if(value.length < 4 || value.length > 1024) {
                                    return [false, 'Kata laluan mestilah sekurang-kurangnya 4 atau maksimum 1024 aksara panjang.'];
                                } lain {
                                    kembali [benar, batal];
                                }
                            },
                            onValidityChange: passwordValidityChangeHandler,
                            onReset: resetPasswordInputHandler
                        }}/>
                    

                        
                            Log masuk
                        
                        
                            atau
                        
                        
                            daftar
                        
                    
                
            
        
    );
}

eksport Laman Masuk lalai;

Seperti yang anda lihat dalam kod di atas, saya menggunakan komponen FormGroup dan menghantar sifat onValidityChange dan onReset / Nilai kod yang dikemas kini> Tukar dan tetapkan semula fungsi untuk menetapkan semula input selepas penyerahan borang, dsb. Gunakan cangkuk tersuai saya useInput untuk mencipta fungsi isValid dan reset Saya menghantar nilai isValid apabila nilai berubah dan menghantar fungsi set semula daripada komponen input menggunakan prop yang ditakrifkan dalam komponen FormGroup. Saya juga menggunakan isLoginValid dan isPasswordValid menyatakan defiend dalam halaman log masuk untuk menyimpan nilai keadaan input isValid komponen. Jadi saya telah menentukan keadaan dalam komponen input dan menyerahkannya kepada komponen induk menggunakan prop dan menyimpan nilainya dalam keadaan lain yang dibuat dalam komponen induk itu. Penggerudian prop yang sedang berlaku membuatkan saya berasa sedikit tidak selesa. 
Negeri diuruskan dalam komponen input, saya mempunyai keadaan ini: 

Nilai: Masukkan nilai elemen. 
isInputTouched: Menentukan sama ada pengguna telah menyentuh/memfokuskan input untuk menentukan sama ada untuk memaparkan mesej ralat pengesahan, jika ada. 

Saya menggabungkan dan menggunakan beberapa fungsi (seperti fungsi pengesahan yang dihantar kepada komponen input) kepada kedua-dua keadaan ini untuk mencipta nilai pembolehubah lain untuk mengumpul maklumat tentang input dan kesahihannya, seperti sama ada nilai itu sah (isValid ), sama ada terdapat pengesahan mesej (mesej), jika input adalah sah (isInputValid = isValid || !isInputTouched) untuk memutuskan untuk memaparkan mesej pengesahan.
Keadaan dan nilai ini diuruskan dalam cangkuk tersuai yang saya buat, useInput, seperti ini: 
hooks/use-state.js
import { useState, useCallback } daripada 'react';

fungsi useInput(validityFn) {
    const [nilai, setValue] = useState('');
    const [isInputTouched, setIsInputTouched] = useState(false);

    const [isValid, mesej] = jenis kesahanFn === 'fungsi' ?
    const isInputValid = isValid || !isInputTouched;

    const inputChangeHandler = useCallback(event => {
        setValue(event.target.value);

        if(!isInputTouched) {
            setIsInputTouched(true);
        }
    }, [isInputTouched]);

    const inputBlurHandler = useCallback(() => {
        setIsInputTouched(true);
    }, []);

    tetapan semula const = useCallback(() => {
        setValue('');
        setIsInputTouched(false);
    }, []);

    kembali {
        nilai,
        ianya sah,
        isInputValid,
        mesej,
        inputChangeHandler,
        inputBlurHandler,
        set semula
    };
}

eksport default useInput;

Saya sedang menggunakan cangkuk tersuai ini dalam Input.js seperti ini: 
komponen/UI/Input.js
import { useEffect } daripada 'react';

import useInput daripada '../../hooks/use-input';

import './Input.scss';

fungsi Input(props) {
    const {
        nilai,
        ianya sah,
        isInputValid,
        mesej,
        inputChangeHandler,
        inputBlurHandler,
        set semula
    } = useInput(props.validity);

    const {
        onIsInputValidOrMessageChange,
        onValidityChange,
        onReset
    } = prop;

    biarkan className = 'kawalan borang';

    if(!isInputValid) {
        className = `${className} form-control--invalid`;
    }

    if(props.className) {
        className = `${className} ${props.className}`;
    }

    useEffect(() => {
        if(onIsInputValidOrMessageChange && typeof onIsInputValidOrMessageChange === 'fungsi') {
            onIsInputValidOrMessageChange(isInputValid, mesej);
        }
    }, [onIsInputValidOrMessageChange, isInputValid, message]);

    useEffect(() => {
        if(onValidityChange && typeof onValidityChange === 'fungsi') {
            onValidityChange(isValid);
        }
    }, [onValidityChange, isValid]);

    useEffect(() => {
        if(onReset && typeof onReset === 'fungsi') {
            onReset(set semula);
        }
    }, [onReset, reset]);

    kembali (
        
    );
}

eksport Input lalai;

Dalam komponen input, saya terus menggunakan keadaan isInputValid Tetapi saya juga lulus isInputValid, mesej, isValid dan set semula untuk digunakan di dalamnya. Untuk melepasi keadaan dan fungsi ini, saya menggunakan onIsInputValidOrMessageChange, onValidityChange, onReset ditakrifkan dalam props anak kepada ibu bapa). 
Ini ialah takrifan komponen FormGroup dan cara saya menggunakan keadaan input di dalam FormGroup untuk memaparkan mesej pengesahan (jika ada): 
components/UI/FormGroup.js
import { useState } daripada 'react';

import Input daripada './Input';

import './FormGroup.scss';

function FormGroup(props) {
    const [mesej, setMessage] = useState(null);
    const [isInputValid, setIsInputValid] = useState(false);

    biarkan className = 'form-group';

    if(props.className) {
        className = `form-group ${props.className}`;
    }

    biarkan labelCmp = (
        
            {props.label}
        
    );

    if(props.sideLabelElement) {
        labelCmp = (
            

                {labelCmp}
                {props.sideLabelElement}
            
        );
    }

    function isInputValidOrMessageChangeHandler(changedIsInputValid, changedMessage) {
        setIsInputValid(changedIsInputValid);
        setMessage(changedMessage);
    }

    kembali (
        

            {labelCmp}
            
            {!isInputValid && 
{message}
}
        
    );
}

eksport Kumpulan Borang lalai;

Seperti yang anda lihat daripada kod di atas, saya mentakrifkan mesej dan isInputValid menyatakan untuk menyimpan mesej isInputValid Saya telah menentukan 2 keadaan dalam komponen input untuk memegang nilai ini tetapi saya perlu menentukan 2 keadaan lain dalam komponen ini untuk menyimpan nilai yang dikemas kini dan lulus dalam komponen input. Ini agak pelik dan nampaknya bukan cara terbaik untuk melakukannya kepada saya. 
Soalannya ialah: Saya rasa saya boleh menggunakan React Context (useContext) atau React Redux untuk menyelesaikan masalah penggerudian prop di sini. Tetapi saya tidak pasti sama ada pengurusan keadaan semasa saya buruk dan boleh diperbaiki menggunakan React Context atau React Redux. Kerana dari apa yang saya faham, React Context boleh menjadi teruk dalam situasi di mana keadaan sering berubah, tetapi jika Konteks digunakan di seluruh aplikasi, maka ini berfungsi. Di sini saya boleh mencipta konteks untuk menyimpan dan mengemas kini keseluruhan borang, membenarkan pengembangan seluruh bentuk. React Redux, sebaliknya, mungkin tidak sesuai untuk silo, dan mungkin agak berlebihan. Apa pendapat kamu? Apakah alternatif yang lebih baik untuk situasi tertentu ini? 
Nota: Memandangkan saya baru dalam React, saya terbuka kepada semua cadangan anda tentang semua pengekodan saya, daripada kesilapan mudah kepada kesilapan umum. Terima kasih! 

Answer 1

Terdapat dua aliran pemikiran utama mengenai pengurusan negeri dalam React: terkawal dan tidak terkawal. Borang terkawal boleh dikawal menggunakan konteks React di mana nilai boleh diakses dari mana-mana sahaja untuk memberikan kereaktifan. Walau bagaimanapun, input terkawal boleh menyebabkan isu prestasi, terutamanya apabila mengemas kini keseluruhan borang pada setiap input. Di sinilah wujudnya borang yang tidak terkawal. Dengan paradigma ini, semua pengurusan negeri mesti memanfaatkan keupayaan asli penyemak imbas untuk memaparkan keadaan. Masalah utama dengan pendekatan ini ialah anda kehilangan aspek React pada borang, anda perlu mengumpul data borang secara manual semasa penyerahan, dan mengekalkan berbilang rujukan untuk ini boleh membosankan.

Input terkawal kelihatan seperti ini:

const [name, setName] = useState("");

return <input value={name} onChange={(e) => setName(e.currentTarget.value)} />

EDIT: Seperti yang @Arkellys nyatakan, anda tidak semestinya memerlukan rujukan untuk mengumpul data borang, Berikut ialah contoh menggunakan FormData

dan di luar kawalan:

const name = useRef(null);
const onSubmit = () => {
    const nameContent = name.current.value;
}
return <input ref={name} defaultValue="" />

Sangat jelas daripada kedua-dua contoh bahawa mengekalkan borang berbilang komponen menggunakan mana-mana pendekatan adalah membosankan, jadi perpustakaan sering digunakan untuk membantu anda mengurus borang anda. Saya secara peribadi mengesyorkan React Hook Form sebagai perpustakaan borang yang diuji, diselenggara dengan baik dan mudah digunakan. Ia mengambil bentuk yang tidak terkawal untuk prestasi optimum sambil masih membenarkan anda menonton input tunggal untuk pemaparan reaktif.

Mengenai sama ada anda menggunakan Redux, konteks React atau mana-mana sistem pengurusan keadaan lain, biasanya tiada perbezaan dari segi prestasi, dengan andaian anda melaksanakannya dengan betul. Jika anda menyukai seni bina fluks maka gunakan Redux, tetapi dalam kebanyakan kes konteks React adalah berprestasi dan mencukupi.

Percubaan useInput 自定义挂钩看起来是解决问题 react-hook-form 和 react-final-form anda yang berani tetapi tersasar pada kod >telah diselesaikan. Anda mencipta kerumitan yang tidak perlu dan kesan sampingan yang tidak dapat diramalkan dengan abstraksi ini. Selain itu, anda cermin props yang biasanya merupakan anti-corak dalam React.

Jika anda benar-benar mahu melaksanakan logik borang anda sendiri (yang saya syorkan untuk tidak lakukan melainkan untuk tujuan pendidikan), anda boleh mengikuti garis panduan ini:

1. Simpan satu sumber kebenaran pada nenek moyang tertinggi
2. Elakkan mencerminkan dan menyalin keadaan
3. Gunakan useMemo 和 useRef untuk memaparkan semula sesedikit mungkin

Answer 2

Ini adalah aspek mudah yang saya gunakan untuk memutuskan antara perpustakaan langgan-terbit seperti Redux dan keadaan penyebaran melalui pepohon komponen.

Jika dua komponen mempunyai hubungan ibu bapa-anak dan paling banyak dua tepi antara satu sama lain, sebarkan keadaan anak kepada ibu bapa

Ibu bapa -> anak1-tahap1 -> anak1-tahap2 ------ OK

Ibu bapa -> anak1-tahap1 ------ OK

Ibu bapa -> anak1-tahap1 -> anak1-tahap2 -> anak1-tahap3 --> Terlalu banyak perjalanan untuk menukar status daripada kanak-kanak1-tahap3 kepada ibu bapa

• Jika jarak antara komponen interaktif lebih daripada 2 tepi, gunakan redux
• Gunakan redux untuk komponen adik beradik, iaitu komponen anak yang berkongsi komponen induk dan perlu berkomunikasi antara satu sama lain (pilih item pokok di panel sisi dan tunjukkan butiran item yang dipilih dalam komponen utama)

Sejak pelaksanaan

• Saya dapati useInput sebagai pemfaktoran semula yang berlebihan, komponen input anda sepatutnya mencukupi untuk mengurus operasi berkaitan input, pengesahan abstrak yang lebih baik dsb.
• Anda boleh mencetuskan semua pengesahan pada penyerahan borang, dalam hal ini anda tidak memerlukan input terkawal (tambahkan pengesahan pada acara onSubmit borang)
• Walau bagaimanapun, jika borang anda mengandungi terlalu banyak medan (katakan >5) dan anda ingin mengesahkan medan sebelum menyerahkan, anda boleh menggunakan acara onBlur bagi medan input atau menggunakan onInput dengan tindakan nyahpantun (cth. tindakan nyahpantun daripada lodash) Atau laksanakan seperti ini

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}