反應 - 按鈕 onClick 未觸發

Question

我的按鈕 onClick 沒有觸發警報消息：

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

我認為這一行可以被覆蓋 something className={"fas fa-sliders-h"}只需刪除 {}。 在這里工作。

驗證您是否正確接收handleClick道具。

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

我改成了這個，現在也可以工作了：

<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>