Usando ganchos. El componente principal pasa un valor al componente secundario, que muestra el componente secundario. Pero me gustaría que ese componente se pueda editar y una vez que el usuario haga clic en Guardar, su nuevo valor se debe devolver al componente principal y luego se usa para actualizar.
componente padre:
const [value, setValue] = useState(""); // value is set by some function <Child value={value} />componente hijo:
<h2 contentEditable=true >props.value</h2> // somehow save the value, even to a different variable, and pass it back to parent component to setValueHe intentado establecer en mi archivo de componentes secundarios algo como
const childValue=props.valueo
const [childValue, setChildValue] = useState(props.value)y probé console.log en esos valores, pero todos están vacíos, y si los pasé a h2 en el componente secundario, no aparece nada.
--- EDITAR Intenté pasar la función para establecer el valor al padre, pero tengo problemas para obtener el valor modificado.
Para el componente secundario, me gustaría guardar onChange o al hacer clic en un botón, pero me falta una forma de capturar el nuevo valor.
el componente principal tiene una función saveValue (nuevo valor) que paso al componente secundario en el elemento secundario
const {value, saveValue} = props; return <h2 onChange={() => saveValue(e.target.value)} contentEditable=true> {value} </h2>Tengo saveValue en el componente principal e intenté cambiar la función para imprimir el argumento en la consola, pero no se registra nada.
También intenté guardar los cambios con un botón, aunque no tengo ningún método para capturar los cambios reales realizados en h2, ya que mi código se parece a esto:
const {value, setValue} = props; <h2 contentEditable=true>{value}</h2> <button onClick={()=>setValue(value)}>Save</button>Esto solo establece el valor en el valor anterior y no en el editado.
Pase setValue al componente secundario como accesorio y llámelo dentro. Por ejemplo:
const ChildComponent = ({value, setValue}) => { return ( <> <button onClick={() => setValue('my new value')}> change value </button> <span>{value}</span> </> ) } const ParentComponent = () => { const [value, setValue] = useState(""); return <ChildComponent value={value} setValue={setValue}/> }Puede abordar este problema de 2 maneras. Ambos enfoques son básicamente lo mismo, ya que finalmente está pasando una función para manejar el cambio de estado.
Enfoque 1 : Cree una función de controlador (digamos handleValueChange ) para administrar el cambio de estado usando setValue en el componente principal. Luego puede pasar esta función de controlador al componente secundario.
Componente principal :
const Parent = () => { const [value, setValue] = useState(""); function handleChange() { // Some logic to change the "value" state setValue("A new value"); } return <Child value={value} handlerFunction={handleChange} /> }Componente hijo :
const Child = (props) => { const { value, handlerFunction } = props; // Utilize the props as per your needs return ( <> <h2 contentEditable>Value: {value}</h2> <button onClick={handlerFunction}>Change state</button> </> ); }; Enfoque 2 : Pase la función setValue al componente secundario como accesorios.
Componente principal :
const Parent = () => { const [value, setValue] = useState(""); return <Child value={value} setValue={setValue} /> }Componente hijo :
const Child = (props) => { const { value, setValue } = props; // Utilize the props to change the state, as per your needs function handleChange() { setValue("A new value"); } return ( <> <h2 contentEditable>Value: {value}</h2> <button onClick={handleChange}>Change state</button> </> ); };