Archivo de contador
import React, { useState } from "react"; import Widget from "./widget"; const Counter = () => { const [form, setForm] = useState(<></>) const [text, setText] = useState("") const onCounterChange =() => { setText(text) } const formLoad =() =>{ setForm( <Widget onCounterChange={onCounterChange} children={ <input type="text" onChange={(e) =>{ setText(e.target.value) }}/> } /> ) } return ( <div> {text} <button onClick={formLoad}> load widget </button> {form} </div> ) } export default CounterArchivo de widgets
import React from 'react' export default function Widget(props) { return ( <div className="buttons"> {props.children} <button onClick={props.onCounterChange}>Save</button> </div> ) }He creado una pequeña página de impresión de texto. por algún motivo, he agregado elementos secundarios en un componente diff y manejando el widget en un estado, por lo que cuando trato de cambiar los datos, el estado del texto cambia, pero cuando hago clic en Guardar, el estado del texto se vuelve vacío
Como mencioné en mi comentario, poner un componente en estado probablemente no sea la mejor manera de abordar esto. En su lugar, tendría un estado booleano que le permite activar/desactivar el componente.
const { useState } = React; function Example() { const [ showWidget, setShowWidget ] = useState(false); const [ text, setText ] = useState(''); function handleChange(e) { setText(e.target.value); } function handleClick() { setShowWidget(!showWidget); } function handleSave() { console.log(`Saved state: ${text}`); } return ( <div> <p className="text">Current state: {text}</p> <button onClick={handleClick}> Load widget </button> {showWidget && ( <Widget> <input type="text" onChange={handleChange} /> <button onClick={handleSave}>Save</button> </Widget> )} </div> ); } function Widget({ children }) { return <div className="widget">{children}</div>; } ReactDOM.render( <Example />, document.getElementById('react') ); .widget { margin-top: 1em; } .text { margin-bottom: 1em; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>