28/08/2023 - tonyven1 ha scritto:
Credo di aver finito l'esercizio, ma mi rimane da capire perchè il text dell'inserimento della mail non funziona. […]
No, non ci siamo: React non si usa assolutamente così.
Brevemente…
let testo=document.getElementById('vis');
Questo codice non è ammesso: non si attribuiscono ID agli elementi, e non si accede direttamente al DOM!
if(nome ==='' && cognome==='' && telefono===''&& mail===''){
return(
<p>
{testo.innerHTML='Inserisci i dati'}
</p>
);
Anche qui, questa parte di codice non ha nessun senso. Il compito della funzione è restituire (usando la sintassi JSX) gli elementi che React deve “renderizzare” nella pagina. Tu qui hai imposto una condizione con un if() che restituisce un paragrafo, quindi se quella condizione si verifica, tu vedrai solamente un paragrafo nella pagina. Non riuscirai quindi a “uscire” da quella situazione, in quanto non vedendo più gli altri elementi non potrai nemmeno inserire i dati, in breve non potrai fare più nulla.
Come se non bastasse, il codice nelle graffe {} è sbagliatissimo su diversi fronti: dovrebbe contenere JSX per indicare gli elementi nel paragrafo, o il testo del paragrafo, o una espressione JavaScript racchiusa tra {} che restituisca come valore ciò che si dovrebbe visualizzare nel paragrafo delimitato da <p></p>, mentre qui stai inserendo del codice che imposta “direttamente” (ossia tramite le funzioni del DOM) l'HTML da visualizzare all'interno di un altro elemento.
In pratica, al verificarsi del tuo if(), tu stai dicendo a React di renderizzare solo quel paragrafo (è il valore di ritorno della funzione) il cui contenuto è l'impostazione tramite DOM (che non si dovrebbe usare) del testo che sta all'interno di un altro elemento, o dello stesso elemento, recuperato dal DOM tramite l'ID.
La domanda che dovrebbe sorgere è….. a che ti serve React se continui a mettere degli ID, a usare document.getElementById(), a impostare il testo con innerHTML, ecc.? Non senti che c'è qualcosa che stride?
React ha il suo Virtual DOM. L'accesso al DOM lo fa esclusivamente React in base alle interfacce che gli dici di rappresentare usando i suoi elementi. Gli elementi li esprimi in “simil HTML” usando la sintassi JSX, ma non è HTML. Al DOM non devi accedere direttamente. L'obiettivo della tua funzione, come già detto, è quello di indicare tutti, tutti, tutti gli elementi che fanno parte dell'interfaccia e che devono essere rappresentati. Tendenzialmente, nella funzione del componente c'è codice per determinare i valori di interesse, ma un solo e unico return.
Mi sa che le opzioni sono due: o non segui le guide e gli esempi disponibili online (da nessuna parte troverai un codice come il tuo), oppure le segui ma preferisci intuire (sbagliando) il funzionamento del framework in base però a un'esperienza che non hai sul mondo frontend, e quindi presupponendo meccanismi che non funzionano e non potrebbero mai funzionare.
Qui non si tratta di correggere un bug, ma di formarsi correttamente e capire il funzionamento reale del framework.
Leggi questo libro che per i neofiti spiega molto bene e passo per passo tutti i suddetti principi.
Ciao!