Caricamento pagine React

tonyven1

il 12 ago 2023, 17:08

30 risposte

tonyven1

Utente Attivo

Iscritto da: gen, 2023

Messaggi:: 69

Caricamento pagine React

12 ago 2023, 17:17



import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Main from "./pagine/Main";
import Convalida from "./pagine/Convalida";
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        
      <Route path="/" element={<Main />}>
      <Route path="Main" element={<Main />} />
      <Route path="Convalida" element={<Convalida />} />
          
       </Route>
      </Routes>
    </BrowserRouter>
  );
 
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

import React from 'react';
import Convalida from "./Convalida";

const Main = () => {
  function valida(){
  var nome=document.getElementById('nome').value;

    let scelta=prompt('Inserisci scelta');

    if ((nome === "") || (nome === "undefined")) {
            
      switch(scelta){
         case "1":
      alert("Devi inserire un nome");
      break;
         case "2":
        return (<p>
          <Convalida/>
          </p>
          )
        
         
          default:
            document.getElementById('p').innerHTML="ciao";
      }
      
   return false;
   }

  }
    return <div>
    <p><label>Nome</label><input type="text" id="nome"></input></p>
    <p><label>Telefono</label><input type="text" id="telefono"></input></p> 
    <p><label>Email:</label><input type="text" id="email"></input></p>
    <p><label>Password</label><input type="password" id="password"></input></p>
    <p><label>Conferma password:</label><input type="password" id="conferma"></input></p>
    <p id="p"></p>
    <br></br>
    <button onClick={valida} >Invia</button>
    </div>
    
  };
  
  export default Main;

import ReactDOM from 'react-dom/client';

const Convalida = () => {
    
return (<div >
   <p>Devi inserire il nome</p> 
</div>)
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Convalida />);
export default Convalida;;

Ciao a tutti. Non so se è il posto giusto per postare questo problema. Ho la necessità di passare tra una pagina e un'altra con React. Ho una pagina per inserire dei dati (nome, cognome ecc..) premendo un pulsante Invia si dovrebbe aprire un'altra pagina che mi chiede di inserire il dato mancante. Al momento mi sono impantanato sulla logica da seguire con React. Perchè premendo il pulsante Invia non succede nulla. Posto il codice così magari si capisce meglio. Ho 3 funzioni: Main (per inserire i dati), Index( per gestire i dati), Convalida( per conferma dati)

30 Risposte

P
paololetto
Pochi posts
Iscritto da
ago, 2023
Messaggi:
6
Re: Caricamento pagine React
12 ago 2023, 18:53
Io ho fatto una cosa del genere , ma invece di cambiare pagina per inserire il dato mancante ho sostituito solo il form.
In pratica nella pagina Main ti devi creare un multi-form . Io ho seguito e studiato questo esempio : https://www.youtube.com/watch?v=M9WIgibsfnQ
T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69
Re: Caricamento pagine React
13 ago 2023, 12:56
Grazie mille. Un ottimo suggerimento. Ho parecchio da studiare ancora :)

tonyven1

Utente Attivo

Iscritto da: gen, 2023

Messaggi:: 69

Re: Caricamento pagine React

13 ago 2023, 21:13

Ciao a tutti. Dopo aver googolato parecchio, letto e riletto React su W3School e chi più ne più ne metta sono arrivato ad un vicolo cieco. Ho una pagina dove inserisco dei dati, premo invio e si apre un'altra pagina con altri dati. L'esercizio richiede di tornare alla pagina principale premendo un semplicissimo , schifossissimo pulsante. Ovviamente non mi funziona cosi posto il codice per vedere se riesco a capire dove sbaglio. Se è un errore logico o quant'altro non saprei. Spero in un vostro aiuto.

import ReactDOM from 'react-dom/client';

const Main = () => {

  function valida(){
   function previous(){
    window.open("Main");
  }
    
  var  nome=document.getElementById('nome').value;

    let scelta=prompt('Inserisci scelta');

    if ((nome === "") || (nome === "undefined")) {
            
      switch(scelta){
         case "1":
      alert("Devi inserire un nome");
      break;
         case "2":
          
          const root = ReactDOM.createRoot(document.getElementById('root'));
          root.render(<div>
           Devi inserire il nome 
           <div>
           
           <button onClik={previous}>Indietro</button>
           </div>
           </div> );
           
          break;
           default:
            document.getElementById('p').innerHTML="ciao";
      }
      
   return false;
   
   }

  }
    return <div>
    <p><label>Nome</label><input type="text" id="nome" ></input></p>
    <p><label>Telefono</label><input type="text" id="telefono" ></input></p> 
    <p><label>Email:</label><input type="text" id="email" ></input></p>
    <p><label>Password</label><input type="password" id="password" ></input></p>
    <p><label>Conferma password:</label><input type="password" id="conferma" ></input></p>
    <p id="p"></p>
    <br></br>
    <button onClick={valida} >Invia</button>
    
    </div>


};

export default Main;

T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69
Re: Caricamento pagine React
13 ago 2023, 21:35
Giusto per alleggerire. ho trovato quest'altro modo che utilizza un metodo diverso:
https://github.com/nishant-666/Passing-data-in-React/blob/master/src/ParentToChild/ParentToChild.js
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Caricamento pagine React
13 ago 2023, 22:59
13/08/2023 - tonyven1 ha scritto:
Dopo aver googolato parecchio, letto e riletto React su W3School e chi più ne più ne metta sono arrivato ad un vicolo cieco. […]
Ho dato un'occhiata al tuo codice e direi che la cosa non mi stupisce, nel senso che il codice è completamente errato: stai usando una commistione di rendering React, accesso diretto al DOM, e uso di prompt() inappropriato.
Sintetizzo in poche parole: React NON si usa in questo modo.
Prima di cimentarsi nell'uso di qualsivoglia linguaggio o libreria, il primo passo da fare è quello di capire come funziona, partendo ovviamente dalle basi, costruendo cose semplici, e poi passare a una applicazione più complessa.
Qui stai facendo un “mischione totale” che rende evidente più che mai che stai cercando di “bruciare le tappe” assemblando casualmente codice che trovi in giro puntando alla risoluzione di problemi che peraltro non avresti se utilizzassi React nel modo in cui è stato congeniato.
Parti dal tutorial ufficiale della libreria.
Ciao! :)
T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69
Re: Caricamento pagine React
14 ago 2023, 15:09
Ciao. Mentre mi sto leggendo il tutorial su React ho notato una cosa strana. Nel fare copia e incolla dei listati dalla pagina del browser all'editor di visual studio ho notato che è come se non venisse copiato da visual studio. Devo ridigitare il codice. Ma è normale?
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Caricamento pagine React
14 ago 2023, 15:18
14/08/2023 - tonyven1 ha scritto:
Nel fare copia e incolla dei listati dalla pagina del browser all'editor di visual studio ho notato che è come se non venisse copiato da visual studio. Devo ridigitare il codice. Ma è normale?
Cosa intendi con “è come se non venisse copiato da Visual Studio”? Tu stai copiando IN Visual Studio, e non DA.
Spiegati meglio.
Sorvolando su questo, direi che ridigitare il codice non fa senz'altro male, anzi io eviterei di copiarlo esattamente com'è, ma prenderei ogni esempio di codice come elemento da rielaborare mentalmente per capire il concetto, applicandolo poi in modo diverso, o tutt'al più riscrivendolo andando a memoria o applicandolo come esercizio di ciò che si è appreso.
Il copia/incolla non ha mai insegnato niente a nessuno.
T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69
Re: Caricamento pagine React
14 ago 2023, 16:16
Grazie Alka per i tuoi preziosissimi consigli. Era per velocizzare le cose.
T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69
Re: Caricamento pagine React
14 ago 2023, 20:43
Comunque confermo quanto detto sopra. Se digito manualmente il codice su visualstudio funziona. Se faccio copia e incolla DA pagina web A visualstudio non funziona sempre(il codice). Non me lo so spiegare. Di solito utilizzo un hard-disk esterno per salvare tutti gli esercizi e fare prove, forse è l'hard-disk che non è di qualità. Booh!
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Caricamento pagine React
14 ago 2023, 21:33
14/08/2023 - tonyven1 ha scritto:
Se faccio copia e incolla DA pagina web A visualstudio non funziona sempre(il codice).
Probabilmente la copia aggiunge informazioni non necessarie, come i numeri di riga.
Ad ogni modo, se ciò avviene, credo che dovresti accorgertene se il codice che incolli ha un senso nel leggerlo: se fai copia/incolla in modo acritico, come già detto, ossia senza sapere quello che stai copiando, non sei in grado di capire cosa sia “lecito” e utile e cosa invece vada scartato o sia superfluo.
Ma questo è un altro problema: anche copiando il codice altrove, bisogna sapere qual è il suo scopo.
14/08/2023 - tonyven1 ha scritto:
Di solito utilizzo un hard-disk esterno per salvare tutti gli esercizi e fare prove, forse è l'hard-disk che non è di qualità.
La bontà di un hard disk non varia in base al fatto di digitare dei caratteri o di fare copia/incolla.
Questa ipotesi non ha assolutamente alcuna motivazione valida alla base. :)
T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69
Re: Caricamento pagine React
15 ago 2023, 22:55
Ciao. Ti garantisco che quando incollo su visualstudio incollo solo codice e ho notato che ridigitandolo manualmente funziona. Bella rogna. Comunque verifico sempre ciò che copio ma ora forse capisco perchè divento matto quando non funziona il codice ma è scritto come deve essere scritto.
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Caricamento pagine React
16 ago 2023, 10:23
15/08/2023 - tonyven1 ha scritto:
Ti garantisco che quando incollo su visualstudio incollo solo codice e ho notato che ridigitandolo manualmente funziona.
Se il codice funziona quando riscritto, ma non funziona quando fai copia/incolla, sicuramente c'è una differenza: è garantito.
Che possano essere caratteri non visibili o altro, questo è un discorso differente.

tonyven1

Utente Attivo

Iscritto da: gen, 2023

Messaggi:: 69

Re: Caricamento pagine React

17 ago 2023, 15:56

Ciao. Dopo aver letto il tutorial su React e adattato il nuovo script eccomi di nuovo ad un punto cieco. Non riesco a implementare un semplice IF. Ho una textbox dove se inserisco un nome mi visualizza il nome , se la casella è vuota mi deve dire di inserire qualcosa. Mi sono stoppato proprio qui perchè non funziona con la textbox vuota.

import './App.css';
import { useState } from 'react';


export default function App() {
  
  const formArray=[1,2];
  const [formNo, setFormNo]=useState(formArray[0]);
  const [valore, setValore]=useState('');
  
  function Vista(e){
    
    setValore(e.target.value)
    return(
      <>
   {valore ===''  ? (<p>Devi inserire il nome</p>) : valore}  // Condizione che non funziona
   </>
    );
  }
  
  const next =() =>{
  setFormNo(formNo +1);
  
    
  }
  const prev =() =>{
    setFormNo(formNo-1);
  }
   return (
     <>
    {
      formNo === 1 && <div>
        <div >
       <h1 className="titolo">Pagina inserimento dati</h1>
      <label className="et1" >Nome</label>
      <input type="text" value={valore} onChange={Vista} className="nome" id='nome' required></input><br />
      <button onClick={next}  className='btn'>Invia</button>
      </div>
      /</div>
    }

    {
      formNo === 2 && <div>
       <div  >
          <h1 className="titolo">Pagina di convalida</h1>
         
          <label >Problema pagina: {valore}</label>
          <button onClick={prev} className="btn">Indietro</button>
        </div>
      </div>
    }
    </>
  );
}

T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69
Re: Caricamento pagine React
17 ago 2023, 19:44
Risolto. Dovevo mettere la condizione nel form 2 :)
```
<label >Problema pagina: {valore === ''  ? (<p>Devi inserire il nome</p>) : (valore)}</label>
```

Devi accedere o registrarti per scrivere nel forum

30 risposte