Is it okay to call onClick on an anchor tag in ReactJS
You should create your own element with a span for example :
<span className='sub' onClick={this.anchorClickHandler}>Link</span>
Apply the same styling to it using CSS (or inline CSS if this is a quick fix) :
.sub {
cursor: pointer,
color: blue
}
And then change your page in the function you showed us :
anchorClickHandler = event => {
analytics.submitData({event: "page redirection"});
// Navigate to /link/to/other/page
window.location.href = '/link/to/other/page';
}
Anchor tag with onclick event handler not working in React
from the parent
handleChange() {
this.setState(({...}),
() => window.location.hash = "#/blog";
}
and dont use <a>
, make an element with onChange event
href with onClick in ReactJS
Both options produce almost the same result. Since ActionLink is a stateless component, handleClick
will be re-created and onClick
reallocated. If you want to get the best performance, you can use a class, something like this:
class ActionLink extends React.Component () {
handleClick = (e) => {
e.preventDefault();
console.log('The link was clicked.');
};
render() {
return (
<a href="#" onClick={this.handleClick}>
Click me
</a>
);
}
}
In this example. the handleClick
is bound only once, and only the render method will be executed. You can also bind the handleClick
in the constructor if you prefer. But the differences are so small that I would suggest you use the one you prefer and you find it clearer.
onClick in anchor tag triggers without clicking in react
props.onClick(i+1)
This calls the function and assigns the returned value to the <a>
tags onClick handler. To get a function instead, do this:
props.onClick.bind(this, i+1)
bind()
creates a new function which calls the original one with the given this
context and parameters. If props.onClick()
accepts more parameters, the new function takes the same parameters.
Redirect is not working with onClick method in anchor tag
Try this.
Use useHistory
hook if you have a functional component
import { useHistory } from "react-router-dom";
let history = useHistory();
const handleLogin = () => {
history.push("/amnet/auth")
}
if class-based component:
const handleLogin = () => {
this.props.history.push("/amnet/auth")
}
Creating anchor with onClick that React handles
With React you're supposed to build components and subcomponents, not compose long HTML strings. You're basically undermining React's usage pattern, which is precisely the reason why the attribute you're using contains the word "dangerously".
Here's one way how to implement that list:
class SimpleComponent extends React.Component {
constructor(props) {
super(props);
this.state = { menu_items: [{ name: "First", id: 10 }] };
this.clickMenu = this.clickMenu.bind(this);
}
clickMenu(id) {
console.log(id);
}
render() {
var items = this.state.menu_items.map(item => {
let handleClick = () => {
this.clickMenu(item.id);
};
return (
<li key={item.id}>
<a onClick={handleClick}>
{item.name}
</a>
</li>
);
});
return <ul>{items}</ul>;
}
}
I'm building an array of <li>
elements by mapping state.menu_items
. Since the component is re-rendered when state changes occur, this will always update according to the current state
(and only make changes that are actually necessary, which is one of React's defining characteristics).
Also note that your constructor was missing the super(props)
call, and your state array's single element wasn't wrapped in curly braces.
How to use href with onClick() in IonButton?
you do not really want to use href
use history
const history = useHistory();
<IonButton color="primary"
onClick={(event) => {
event.preventDefault();
saveData();
history.push("/create")}}
> Save
</IonButton>
Related Topics
Why Am I Not Able to Add Input Text into My Table
Javascript Onclick Increment Number
Display Data Label (Legend) in Line-Chart Using Chartjs
How to Create Prompt With Two Input Fields
What Is the Max Size of Localstorage Values
Why New Date().Toisostring() Is Loosing Timezone
Php Ajax Update MySQL Query Onchange from Dropdown (Filtering)
How to Use Lodash to Remove Keys from a Json Object
Chart.Js Showing Time (Hh:Mm:Ss - 24 Hour Clock) on Xaxis
Delaying Angularjs Route Change Until Model Loaded to Prevent Flicker
How to Put a Variable in an Src Attribute
Convert Hex to Binary in JavaScript
Array Map into String With Line Break - React
Multi Select Drop Down With Checkbox
Get Weeks in Month Through JavaScript
Why Isnt Window.Location.Href= Not Forwarding to Page Using Safari
How to Check If Checkbox Is Checked With Protractor, Cucumberjs and Chai