Soy muy nuevo en reaccionar y js, así que tengo problemas con la lógica bool.
Así que tengo un perfil de función que contiene dos métodos const, cada uno de los cuales devuelve información diferente.
function Profile(props) { const returnNormalProfile() const returnEditableProfile()Luego tengo esto para devolver cada const basado en la página.
if (existsCookie) { if(isInEditMode){ return( <div> {returnNormalProfile()} </div> ) }else{ return( <div> {returnEditableProfile()} </div> ) } } return NotLoggedIn }P: ¿Cómo puedo configurar una variable bool como "isInEditMode" y luego devolver la página en función de si es verdadera o no?
Problema actual: intenté hacer var isInEditMode = false y luego hacer la devolución, pero no funciona.
La funcionalidad actual está configurada para que la parte superior de la página tenga un botón como en cada página
<form onSubmit={(b) => handleEdit(b)} style={{ textAlign: 'center' }}> <input type="submit" value="Done" /> </form>Entonces, cuando regreso returnNormalProfile, llama a este código
const handleEdit = () => { isInEditMode = true }¿Qué puedo hacer para que esto funcione? He visto a gente usar const [editMode, setEditMode] = useState(false). Sin embargo, no entiendo cómo usarlo de esta manera.
Tienes que usar estado. isInEditMode debe ser un estado de reacción que, cuando se cambie, provocará una nueva representación y devolverá la interfaz de usuario correspondiente según su valor. declarar isInEditMode como estado usando useState :
const [isInEditMode,setIsInEditMode] = useState(false) Luego actualice isInEditMode :
const handleEdit = () => { setIsInEditMode(true) }Entonces, creo que su problema es que usa el controlador onSubmit en un componente diferente, pero necesita actualizar el valor de isEditMode dentro del componente Profile.
Entonces, sin conocer la estructura de su componente, debe intentar proporcionar el controlador y el valor como accesorio del componente Formulario a Perfil. (o use algo como el componente de la aplicación para hacer eso).
import React, {useState, useEffect} from 'react'; function FormComponent(props) { const [isEditMode, setIsEditMode] = useState(false); return ( <div> <form onSubmit={(b) => setIsEditMode(!isEditMode)}> <input type="submit" value="Done" /> </form> <Profile isEditMode={isEditMode} setIsEditMode={setIsEditMode} /> </div> ) } function Profile(props) { if (props.isEditMode) { return ( <div>{returnNormalProfile()}</div> ) return ( <div>{returnEditableProfile()}</div> ) }