Tengo un evento de desenfoque en una entrada de texto que activa un botón (lo representa con React). Cuando hace clic en el botón, el evento de desenfoque se activa en la entrada de texto que elimina el botón del DOM, pero el evento de clic del botón no se activa. Intenté envolver el código que elimina el botón del DOM en un tiempo de espera de 100 ms y funciona pero se siente extraño, ¿hay una mejor manera?
Aquí está la esencia del código:
const blurHandler = e => { setShowInput(false); //this prevents buttonHandler from being fired // setTimeout(() => setShowInput(false), 100); // this works with 100ms, but not with 50ms for example } const buttonHandler = e => { console.log('Button clicked!'); } const focusHandler = e => { setShowInput(true); } return ( <div> <input type="text" onFocus={focusHandler} onBlur={blurHandler} > {showInput && <button onClick={buttonHandler}>Apply to all</button>} </div> )Esto es fácil, solo necesita usar un disparador de evento diferente. onClick es demasiado tarde, no se activará hasta que ocurra el desenfoque del área de texto, pero onMouseDown se activará antes:
const btn = document.getElementById('btn'); const txt = document.getElementById('txt'); txt.onblur = () => {console.log("Textarea blur fired")} txt.onfocus = () => {console.log("Textarea focus fired")} btn.onclick = () => {console.log("Button onClick fired")} btn.onmousedown = () => {console.log("Button mouseDown fired")} btn.onmouseup = () => {console.log("Button mouseUp fired")} <textarea id="txt">Focus me first</textarea> <button id="btn">Click me next</button>Dado que renderizas condicionalmente el botón con:
{showInput && <button onClick={buttonHandler}>Apply to all</button>} Tan pronto como establezca showInput en un valor falso, se eliminará del DOM. Tienes un par de opciones:
return ( <div> <input type="text" onFocus={focusHandler} onBlur={blurHandler} > <button style={{opacity: showInput ? 1 : 0}} onClick={buttonHandler}>Apply to all</button>} </div> )Establecer la opacidad en 0 ocultará el botón, pero no lo eliminará del dom.
const btnClickedRef = useRef(false) const buttonHandler = e => { console.log('Button clicked!'); btnClickedRef.current = true } return ( <div> <input type="text" onFocus={focusHandler} onBlur={blurHandler} > {showInput && btnClickedRef.current && <button onClick={buttonHandler}>Apply to all</button>} </div> )