反应 - 按钮 onClick 未触发

Question

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>
    );
}
}

Answer 1

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>
    );
}
}

Answer 2

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>