OnClick не работает кнопки реакции, несмотря на привязку - PullRequest
Новая
       33

OnClick не работает кнопки реакции, несмотря на привязку

0 голосов
/ 18 марта 2019

Я создал новый компонент в своем коде Reactjs и у меня есть кнопка с функцией onClick. Но функция onClick не работает. Я перепробовал все, но все равно не работает. Есть идеи, как я могу решить эту проблему? 

import React, { Component } from 'react';
import MenuIcon from '@material-ui/icons/Menu';

class HeaderComponent extends React.Component {
constructor(props){

    super(props);

    this.openMenuBar = this.openMenuBar.bind(this);
}

openMenuBar(){
    console.log("open");
}

render(){
    return(
        <div>
        <button onClick={() => { this.openMenuBar()}}>
                <MenuIcon/>
            </button>
        </div>
    );
}

}

Этот компонент затем вызывается в app.js 

<HeaderComponent/>

UPDATE

Немного полезной информации: всякий раз, когда я направляю его к пути (app / path / xx), кнопка не активируется. В противном случае, это кликабельно (если путь является корневым)

Ответы [ 2 ]

1 голос
/ 18 марта 2019

Синтаксис должен быть 

onClick={this.openMenuBar}

Или 

onClick={() => { return this.openMenuBar()}}

Или 

onClick={() => this.openMenuBar() }


class MenuIcon extends React.Component {
  render(){
    return <i className="fas fa-plus" />
  }
}
class HeaderComponent extends React.Component {
    constructor(props){
      super(props);
      this.openMenuBar = this.openMenuBar.bind(this);
    }
     
    openMenuBar(){
      console.log("open");
    }

    render(){
      return(
          <div>
            
            <button onClick={this.openMenuBar}> <MenuIcon /></button>
            <button onClick={() => this.openMenuBar()}> btn2</button>
            <button onClick={() => { return this.openMenuBar()}}> btn3</button>
            
          </div>
    );
}
}
ReactDOM.render(<HeaderComponent />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div id="root"></div>
0 голосов
/ 18 марта 2019

попробуй 

openmenubar = () => {

...

}

и 

<button onClick = { () => this.openmenubar() } > </button>
...