Problema: cuando la página se carga por primera vez, la etiqueta PageHeader H1 muestra un valor en blanco en lugar de "Nueva página". ¿Por qué sucede esto y cómo puedo hacer que muestre "Página nueva"?
En página.js
const [pageTitle, setPageTitle] = useState('New Page'); const pageTitleChangeHandler = (e) => { setPageTitle(e.target.innerText); } return ( <PageHeader title = {pageTitle} onChange = {pageTitleChangeHandler}></PageHeader> );En PageHeader.js
return ( <div className = "page-header"> <h1 className = "page-header-text" contentEditable = "true" onInput = {props.onChange} value = {props.title}> </h1> </div> );Creo que debería eliminar el atributo de value de la etiqueta h1 y establecer dangerouslySetInnerHTML en su lugar como
import React from "react"; export default function PageHeader(props) { return ( <div className="page-header"> <h1 className="page-header-text" contentEditable="true" onInput={props.onChange} dangerouslySetInnerHTML={{ __html: props.title }} > </h1> </div> ); }Si desea que aparezca New Page al cargar la página, debe cambiar el argumento a setPageTitle de e.target.innerText a e.target.value y agregar {props.title} en la etiqueta h1 .
Luego puede cambiar onInput a onKeyDown .
Esto solo eliminaría New Page del encabezado una vez que edite. Para evitar esto, simplemente cambie title={pageTitle} a title={"New Page"} .
const [pageTitle, setPageTitle] = useState('New Page'); const pageTitleChangeHandler = (e) => { // This will set the value prop setPageTitle(e.target.value); } return ( <PageHeader title={"New Page"} onChange={pageTitleChangeHandler} ></PageHeader> ); } const PageHeader = (props) => { return ( <div className="page-header"> <h1 className="page-header-text" contentEditable="true" onKeyDown={props.onChange} value={props.title} > {props.title} </h1> </div> );