My button onClick is not firing the alert message:
import React, { Component } from 'react';
import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from
'reactstrap';
import { Link } from 'react-router-dom';
import './NavMenu.css';
export class Header extends Component {
static displayName = Header.name;
constructor(props) {
super(props);
this.sideMenuClick = this.sideMenuClick.bind(this);
}
sideMenuClick() {
alert("hhhhhh");
this.props.handleClick();
}
render() {
return (
<div className="headercon">
<button onClick={this.sideMenuClick} className={"fas fa-sliders-h"} style={{ color: '#000000', fontSize: 16, width: 25, height: 25, float: 'right', marginRight: 20, }}></button>
</div>
);
}
}
I think this line can be overwritten something className={"fas fa-sliders-h"}
just remove the {}. works here.
Verify if you're receiving handleClick
props correctly.
class Header extends React.Component {
static displayName = Header.name;
constructor(props) {
super(props);
this.sideMenuClick = this.sideMenuClick.bind(this);
}
sideMenuClick() {
alert("hhhhhh");
this.props.handleClick();
}
render() {
return (
<div className="headercon">
<button
className="fas fa-sliders-h"
onClick={this.sideMenuClick}
style={{
color: '#000000',
fontSize: 16,
width: 25,
height: 25,
float: 'right',
marginRight: 20,
}} />
</div>
);
}
}
I changed to this and now works also:
<button onClick={() => alert("cccc")} style={{ color: '#000000', fontSize: 16, width: 25, height: 25, float: 'right', marginRight: 20, }}><i className="fas fa-sliders-h"></i></button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.