Quiero crear un componente React con un método de representación que tenga una etiqueta <a> que envuelva un "cuadro" completo, por así decirlo, que redirige a otra página cuando se hace clic. Dentro de dicho cuadro hay un <button> en el que se puede hacer clic que activa un evento que cambia de estado. Lo que quiero poder hacer es hacer clic en el <button> y activar el evento sin que se produzca la redirección de la etiqueta <a> .
Probé algunas ideas con stopPropagation() pero no tuve suerte:/ No quiero mover el botón fuera de la etiqueta <a> tampoco, así que no estoy seguro de adónde ir desde aquí.
Parece que debería ser algo simple, pero no puedo entenderlo. ¡Gracias!
el método de renderizado se ve así:
render(){ return( <div> <a href="http://www.google.com"> <div className="box"> <h2 className="title">Random Title</h2> <button onClick={this.handleClick}> Like </button> </div> </a> </div> ) }handleClick() se vería así:
handleClick = () => { if (this.state.liked) { console.log("disliking") } else { console.log("liking") } this.setState({ liked: !this.state.liked}) }puedes lograr esto con un simple truco. mira lo que hice -
actualización: mira este js fiddle: https://jsfiddle.net/rabinarayanb/pvx2n3x3/
nota: he usado la sintaxis es5. puedes convertir a es6
(function() { var BoxSetup = React.createClass({ clicked : "", getInitialState : function () { return { clickCount : 0}; }, handleDivClick : function (event) { if (this.clicked !== "Button") { window.location.href = "http://www.google.com"; } // reset this.clicked = ""; }, handleButtonClick : function (event) { this.clicked = "Button" this.setState({ clickCount : ++this.state.clickCount }); }, render : function () { return ( <div> <div onClick={this.handleDivClick} style={ { }}> <div style={ { width : "100px", height : "100px", border : "1px solid red" } }> <h2 className="title">{ this.state.clickCount }</h2> <button onClick={this.handleButtonClick}> Like </button> </div> </div> </div> ); } }); var element = React.createElement(BoxSetup, { title : "Hello" }); ReactDOM.render(element, document.getElementById("app")); })();Lo que estás queriendo hacer no parece posible. Una vez que el usuario haga clic en el <a> contenido adjunto, será redirigido al contenido vinculado, en su caso: http://www.google.com Si desea ejecutar su función, siga el enlace, debe eliminar el <a> etiquetar y poner window.location = "http://www.google.com"; al final de su función.
Una forma de hacerlo es establecer una referencia al elemento ancla y luego usar los elementos de botón onMouseEnter y onMouseLeave para cambiar programáticamente la propiedad href de los elementos ancla cada vez que el usuario mueva el mouse sobre el botón Me gusta.
class Test extends React.Component { constructor(props){ super(props) this.state={ likes:0 } this.anchorElement=null; } enter = () => { this.anchorElement.href='javascript:;'; } leave = () => { this.anchorElement.href='http://www.google.com'; } handleClick = () => { this.setState({ likes: ++this.state.likes}); } render() { return ( <div> <div>{'Likes:'+this.state.likes}</div> <a href="http://www.google.com" ref={(el) => { if (el) { this.anchorElement = el; } }}> <div> <h2 className="title">Random Title</h2> <button onClick={this.handleClick} onMouseEnter={this.enter} onMouseLeave={this.leave}> Like </button> </div> </a> </div> ); } }Véalo en acción: violín de trabajo
En el violín, notará que el enlace se está activando, pero no va a ninguna parte porque está efectivamente "apagado" mientras el botón está debajo del mouse. Si desea deshacerse de la apariencia de activación en el enlace, se necesita un poco más de manipulación del elemento ancla, o simplemente establezca la propiedad css a:active en el mismo color que el color base/activo.
Personalmente, evitaría el escenario si es posible, pero ese es solo un buen consejo, algo que más personas por aquí deberían aprender que no es lo mismo que una respuesta.