Tengo un formulario en una página que tiene una imagen, un nombre, una descripción y un botón de "libro". Me gustaría pasar todos esos valores a otra página.
Aquí está la página donde se muestran los datos. Tengo muchos formularios con diferentes datos.
function TherapistEntry(props) {
const [therapistDetails, setTherapistDetails] = useState({
name: ""
})
function storeName(event) {
setTherapistDetails({
name: event.target.value
})
}
function redirectPage() {
// PassName(therapistDetails.name)
props.history.push('/publicTherapistProfile')
}
return (
<div className="album py-5 bg-light">
<div className="container">
<div className="row">
{therapists.map(properties => {
return (
<div className="col-lg-3 col-md-4 col-sm-6">
<div className="card mb-4 shadow-sm">
<ProfileImage image={properties.image} name="image" />
<div className="card-body">
<p className="card-text" onChange={storeName} name="name">Name: {properties.name}</p>
<p className="card-text" description="description">Description: {properties.description.substring(1, 100)}
</p>
<div className="d-flex justify-content-between align-items-center">
<div className=" btn-group">
<button onClick={redirectPage} type="button" className="viewButtonHover btn btn-md btn-outline-secondary">View</button>
</div>
<small className="text-muted">5 Stars</small>
</div>
</div>
</div>
</div>
)
})}
</div>
</div>
</div>
)
}
export default withRouter(TherapistEntry)
Estoy intentando probar esto con el valor del nombre primero almacenándolo en el estado. onChange parece ser la única forma de almacenarlo.
Luego quiero pasar estos valores almacenados a esta página.
function IndividualTherapistPage(props) {
const [passedTherapist, setPassedTherapist] = useState({
name: ""
})
return (
<div>
<Header />
<div>
<div className="row">
<div className="alignTherapist col-lg-8 col-md-8 col-sm-8">
<div className="container">
<h2>Individual Therapist Section</h2>
</div>
</div>
<div className="team-boxed col-lg-8 col-md-8 col-sm-8">
<div className="container">
<div class="intro">
<h2 class="text-center">Therapist </h2>
<p class="text-center">Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat, pellentesque ut laoreet vitae.</p>
</div>
<TherapistOfInterestToPurchase name={passedTherapist.name}/>
</div>
</div>
<div className="col-lg-4 col-md-4 col-sm-4">
<h2 style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>Book</h2>
</div>
</div>
</div>
{/* <Footer /> */}
</div>
)
}
export default IndividualTherapistPage;
¿Alguien sabe cómo puedo hacer esto?
¿Hay una recarga de página real entre esos dos o no?¿Simplemente cambiar dos vistas en tu aplicación de reacción?
- Martín
28/03/2021 a las 12:32
Hola @Martin Entonces, hay una página debajo de una ruta, llamémosla /people y una vez que haces clic en el botón Ver en la ruta /people, te lleva a otra ruta /peopleInfo, llamémosla.
- Josué
29/03/2021 a las 19:19
------------------------------------
Creo que la forma más sencilla es utilizar los parámetros localStorage o HTTP GET.
Una alternativaLa forma (más avanzada) es utilizar un enrutador de reacción y algún tipo de administración de estado global.
------------------------------------
En reaccionar, transfieres el estado de padre a hijo a través de accesorios. En tu escenario puedes hacerlo con Redux. Esto se utiliza para la gestión del estado global.
------------------------------------
Puedes pasar estos valores en parámetros a otra página y luego obtenerlos siguiendo el ejemplo de este tema a continuación.
reaccionar-enrutador-pculo-param-a-componente
No es necesario usar localstorage o redux para algo así.
------------------------------------
Hay varias formas de hacer esto.
Este es el enfoque más sencillo; puede utilizar la API del navegador localStorage si no tiene demasiadas cosas para enviar entre páginas. También puedes hacerlo con la ayuda de reactjs-localstorage.
Esto es un poco más complicado, pero también podría ser mejor a largo plazo a medida que escalas; utiliza la administración de estado global de Redux para lograrlo.
