Quiero expandir el área en la que se puede hacer clic de un componente Seleccionar que tengo y que no tengo acceso para cambiarlo (proviene de una biblioteca).
Este componente Seleccionar está envuelto por un div... Pensé en agregar un controlador de clics a este div para que cuando un usuario haga clic en él, active el clic en Seleccionar. Lo haría si la selección también tuviera un controlador onClick , pero en su lugar, por supuesto, tiene un onChange , que no se activa.
Quería ayuda para encontrar una forma adecuada de activarlo.
Esta es una versión simplificada de mi código JSX:
<div data-testid="language-select"> <MyCustomSelect id="language-selector" options={languageList.map(({ locale, title }) => ({ value: locale, children: title, }))} value={currentLocale} onChange={({ target: { value } }): void => { global.location.replace(resolveUrl(value)); }} /> </div>;Lo que hice:
Agregado onClick a div:
onClick={() => { const languageSelector = document.getElementById('language-selector'); languageSelector?.click(); }}Pero luego, como dije, no funciona ya que no desencadena el cambio.
¿Hay una forma adecuada de lograr este comportamiento?
EDITAR: Creé este entorno limitado para ayudar a comprender mi problema: https://codesandbox.io/s/adoring-wildflower-0ido5j?file=/src/App.js:561-569
Entonces, quiero encontrar una manera de hacer clic en la parte roja (el div) y activar la selección.
Puede usar ref para acceder a los métodos de componentes secundarios, pero debería permitirle hacer clic en el evento
<div data-testid="language-select"> <MyCustomSelect id="language-selector" options={languageList.map(({ locale, title }) => ({ value: locale, children: title, }))} value={currentLocale} onChange={({ target: { value } }): void => { global.location.replace(resolveUrl(value)); }} ref={ref} // Pass ref /> </div>Div clic
ref.current.onClickSería bueno si puede compartir una biblioteca que esté utilizando o una demostración funcional para el problema.
podría intentar hacer referencia a la selección
me gusta:
import React, { useRef } from 'react'; . . . const SelectRef = useRef(null) render ( <div onClick={()=> SelectRef.current.click()}> <MyCustomSelect id="language-selector" ref={SelectRef} options={languageList.map(({ locale, title }) => ({ value: locale, children: title, }))} value={currentLocale} onChange={({ target: { value } }): void => { global.location.replace(resolveUrl(value)); }} /> </div> )Puede que no funcione, ¿puedes avisarme?