0
262
Vistas¿Cómo forzar un nuevo estado en React (Hooks) para el área de texto al hacer clic en otro elemento?
- caja de arena de codesandbox.io
- repositorio github.com
Estoy creando este pequeño proyecto Wiki.
Mi componente principal es Editor() , que tiene definidas las funciones handleClick() y handleModeChange() .
handleClick() cuando se hace clic o se cambia una página en la barra lateral izquierda.
handleModeChange() cambia entre el modo de read y write (los dos botones de icono en la barra lateral izquierda).
Cuando está en modo de read , hacer clic en diferentes páginas en la barra lateral izquierda funciona correctamente y cambia el contenido principal en el lado derecho.
Sin embargo, en el modo de write , cuando el contenido se repite dentro <TextareaAutosize> , el contenido no cambia al hacer clic en el menú de la izquierda.
En Content.js , tengo:
<TextareaAutosize name="textarea" value={textareaValue} minRows={3} onChange={handleMarkdownChange} /> textareaValue se define en Content.js como:
const [textareaValue, setTextareaValue] = useState(props.currentMarkdown); const handleMarkdownChange = e => { setTextareaValue(e.target.value); props.handleMarkdownChange(e.target.value); }; No estoy seguro de cuál es la forma correcta de manejar este cambio dentro del área de texto. ¿Debo obligar de alguna manera al hijo del Editor , Content , a volver a renderizar con handleClick() , o estoy haciendo algo completamente incorrecto y este problema se resolvería si simplemente cambiara la definición de alguna variable?
He estado en esto por un tiempo ahora...
1 Respuestas
Responde la pregunta0
Solo necesita actualizar textareaValue cada vez que cambie props.currentMarkdown . Esto se puede hacer usando useEffect .
useEffect(() => { setTextareaValue(props.currentMarkdown); }, [props.currentMarkdown]); 
Problema:
const [textareaValue, setTextareaValue] = useState(props.currentMarkdown); useState utilizará props.currentMarkdown como valor inicial, pero no actualiza el estado actual cuando cambia props.currentMarkdown .
No relacionado:
La actualización antirrebote del estado principal se puede mejorar usando useRef
const timeout = useRef(); const handleMarkdownChange = (newValue) => { if (timeout.current) { clearTimeout(timeout.current); } timeout.current = setTimeout(function () { console.log("fire"); const items = []; for (let value of currentData.items) { if (value["id"] === currentData.active) { value.markdown = newValue; value.unsaved = true; } items.push(value); } setCurrentData({ ...currentData, items: items }); }, 200); }; usar el tiempo de var timeout es malo porque declara el tiempo de timeout en cada procesamiento, mientras que useRef nos brinda una referencia mutable que persiste en todos los procesamientos