• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

211
Vistas
¿Cómo se pasa la función de devolución de llamada de React hook useState() al atributo de un componente web usando Lit HTML?

Estoy creando un componente web personalizado para usar con React, estoy usando el enlace useState de React y necesito pasarlo a mi componente web personalizado. Sé que los atributos del componente web solo toman cadenas y si tuviera que especificar mi función, perdería su alcance. Así que aquí está mi problema. Estoy usando Lit HTML y React.

 function MyReactcomp() { const [state, setState] = useState(""); return ( <div className="Wrapper"> <customweb-component updateState={setState} /> </div> ); }
about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Intente usar onChange={} en su componente, luego cree una función que maneje el cambio.

 const MyReactComp = (props) => { const [state, setState] = useState(""); const stateUpdateHandler = (event) => { if ( event.target.value.trim().length > 0 ) { setState( event.target.value ); } } return ( <div className="Wrapper"> <CustomWebComponent onChange={stateUpdateHandler} /> </div> ) }

Una de las razones por las que no puede usar directamente setState en onChange={} es que los ámbitos son diferentes, de modo que, cuando this usa dentro de las funciones, es posible que no siempre esté en el ámbito esperado.

Luego, dentro de su CustomWebComponet , devolvería el valor a través de lo siguiente:

 const CustomWebComponent = (props) => { // You can tie this is an event, or some other // normal function where you are processing the return value const onTrigger = (event) => { event.preventDefault(); props.onChange(event.target.myvar.value); } return ( ... ) }

Si nota, el nombre del atributo onChange={} es arbitrario y puede nombrarlo como quiera. Solo asegúrese de usar el mismo nombre cuando llame a esa función, como con props.onChange() dentro de la función onTrigger .

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda