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
.