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> ); }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 .