Tengo un componente de botón representado como se muestra a continuación. No puedo modificar el componente del botón en sí, pero puedo modificar el componente principal que lo representa. Quiero hacerlo de modo que cuando modifique el atributo deshabilitado del elemento del botón en otra parte del código (es decir, modifique el DOM como button.disabled = true ) Dado que no puedo pasarlo de los accesorios principales , el componente del botón se recupera. prestado. Intenté usar useRef y useEffect hook pero no funcionó. Creo que los usé mal. ¿Hay alguna manera de que pueda lograr lo que quiero?
const elementRef = useRef() const [disabled, setDisabled] = useState(elementRef.current?.disabled) useEffect(() => { const buttonElement = elementRef.current buttonElement.addEventListener('disabled', handleDisabled) }, [elementRef.current]) const handleDisabled = (e: any) => { setDisabled(e.target?.disabled) } return( <Button ref={elementRef} disabled={props.isDisabled || disabled}></Button> )Aparentemente estás trabajando en dos "mundos" diferentes: ReactJs y el DOM.
Sugiero usar solo React, y nunca modificar ninguna propiedad DOM directamente.
No muestra cómo desea cambiar el atributo/propiedad disabled "en otra parte del código", pero supongo que desea hacer algo como
const setMyButtonDisabled = function(){ document.querySelector('#myButton').disabled = true; }React simplemente no puede saber acerca de este cambio. Tienes que decirle a React explícitamente, como:
// not recommended: const setMyButtonDisabled = function( setButtonDisabledCallback ){ document.querySelector('#myButton').disabled = true; setButtonDisabledCallback( true ); }Y luego encuentre una manera de pasar los accesorios, de modo que los componentes deseados lo tengan (no puedo saber la relación entre su ejemplo de código y el "otro lugar").
Pero idealmente, nunca establecería la propiedad DOM buttonElements .disabled , sino que establecería un React state buttonDisabled en su lugar, y luego simplemente pasaría eso a donde sea que lo necesite:
// recommended: const setMyButtonDisabled = function( setButtonDisabledCallback ){ setButtonDisabledCallback( true ); }