По-видимому, событие JSX onClick щелкается по умолчанию.

Question

Я думаю, что делаю что-то глупое. У меня есть какой-то код, и я не могу понять, почему он не работает так, как я ожидаю.

Я ожидаю, что терминал войдет в терминал, когда нажата кнопка / ссылка, но, похоже, делает это независимо от

Код ниже

import React, { Component } from 'react'
import DataExample from './dataExample'

export default class home extends Component {
  state = {
    name:"Joy",
    place:"nirvana"
  }

consoleLog = (e) =>{
   return console.log("just clicked")
}


  render() {
    return (
      <div>
        <h3>This is my homepage that contains components</h3>

        <a href="#" onClick={this.consoleLog("link clicked")}>My Button</a>

      </div>
    )
  }
}

Фактический результат показывает, что console.log подтвердил мою кнопку

Answer 1

В настоящее время вы вызываете this.consoleLog () в коде вместо его передачи.

Это должно работать:

<a href="#" onClick={() => this.consoleLog("link clicked")}>My Button</a>

Answer 2

consoleLog() вызывает рендер

    return (
      <div>
        <h3>This is my homepage that contains components</h3>

        <a href="#" onClick={() => this.consoleLog("link clicked")}>My Button</a>

      </div>
    )
  }