score:0
2021 update :
<div
style={{
width: 15,
height: 15,
background: "blue",
cursor: "pointer",
}}
onclick={() => {
window.open("http://google.com", "_blank");
}}
/>
score:1
this worked for me :)
<a target="_blank" href="http://google.com"> <button id="bt" >click</button> </a>
score:4
you don't even need jquery nor react to do that. it's as simple as this:
var ex = document.getelementbyid('ex');
ex.onclick = function(){
console.log('clicked');
}
var bt = document.getelementbyid('bt');
bt.onclick = function(){
ex.click();
}
<button id="bt">click</button>
<a id="ex">triggerable link</a>
of course, in react you can store the ref
of the components, bind to the event and then trigger the event like this:
onclick(){
this.ex.click();
}
render(){
return (
<div>
<button id="bt" onclick={this.onclick.bind(this)} ref={(ref)=>{this.bt = ref}}>click</button>
<a id="ex" onclick={()=>console.log("clicked")} ref={(ref)=>{this.ex = ref}}>triggerable link</a>
</div>
)
}
edit: if you just want a button that behaves like a link, you can use this, or any of the solutions listed in this question:
onclick(){
window.location.href="http://url.com";
}
render(){
return (
<button id="bt" onclick={this.onclick}>click</button>
)
}
score:17
use react-router link,instead of anchor tag.
import react, { component } from 'react';
import {link} from 'react-router-dom'
// reactclass --
return (
<div>
<link to='https://react.semantic-ui.com/'>
<button type="button" classname="btn btn-info">button</button>
</link>
</div>
);
// end--
score:36
like this:
<button
type="button"
onclick={(e) => {
e.preventdefault();
window.location.href='http://google.com';
}}
> click here</button>
Source: stackoverflow.com
Related Query
- In reactJS, how to invoke link click via button press?
- How to invoke button click in List in Reactjs
- how to add row to a table using ReactJS on button click
- How to get key attribute of parent div when button is click in ReactJS
- How to redirect to another page on button click in Reactjs
- ReactJs How to change an icon of a button on the click event?
- How can I get multiple ckEditor by click on a button in ReactJS using Hooks?
- How i can save state ( data ) on Previous/Back" button click in ReactJS
- How to redirect on button click in ReactJS
- How to render a component in a different page when click on a link in a table row in ReactJs
- How to display button only when a link is provided via another file (React)
- How to hide box on body click except of button in using ReactJS Hooks?
- How to get selected values from multiple dropdowns on button click using ReactJs
- How to make open url on click on button in reactjs
- how to load a function when I click on a button in reactjs
- How to access external json data via url link in ReactJS
- How to bind two function for a button click in reactjs
- How to change page after login button click ReactJS
- how to make button click then image is opened using reactjs
- How to change image on button after click reactJs
- How change the styling of dynamically generated JSX via a button click in React Native
- how to increase a input value via button click and also update this value in server site
- How can I toggle a FormControl from disabled to enabled with a button click in Reactjs
- How to render DIV element with a button click on ReactJs
- ReactJs :- How to call dispatch on button click
- How to save my userData when click on 'Edit' button in a table row in reactjs
- How to properly display loading event on button click using reactjs
- How to pass link to react ant design model "Confirm/yes/ok " click button
- How to use array method to change different color on div in. In single button reactjs click
- How make a link by a click on a button inside an IonAlert (component ionic)
More Query from same tag
- Redux Thunk : redux thunk is not dispatching an action
- React/Redux Reset State Upon Route Change
- Set className and create an action with styledComponents
- Passing selected option value by user in remove button: React
- How can i get the value of my input radio button in react?
- TypeError: props.theTodos.map is not a function
- How to fire React Hooks after event
- Converting a timer to react
- css styles not working in react components section but works in the main src directory
- What is the difference between babel-plugin-* and babel-preset-*
- Problem rendering Component in a different page with React Router
- Received `false` for a non-boolean attribute `loading`
- Why can't I have a JSX comment inside an element tag?
- ReactJS map through an array with objects
- Styling individual routes with React
- Do I need to specify the key prop in this case and how would I do that then?
- GoogleAuthProvider does not persist/keep the login on refresh
- React: Mapping children of a parent component
- Trigger onChange event manually
- Creating and using an interface for a history-object in React Typescript?
- Reat-testing-Library with Jest doesnt resolve CRACO aliases
- react mutilple items remove?
- How to change the text of a single button in Reactjs
- support for the experimental 'jsx' isn't currently enabled
- Visualising pattern matching in JavaScript
- POST request to API created by lambda function in amazon AWS in python works good in postman but not in reactjs code
- How to use API color variable in css file?
- Taiwlwindcss: map through data elements with grid returns data in a single column
- Bootstrap modal in React
- React-router and Link in server side rendering