React组件JSX onClick事件默认触发问题求助

嘿，我一眼就揪出问题啦！你现在碰到的情况，是因为在onClick里直接执行了函数调用，而不是传递函数的引用。

问题根源 #

当React渲染你的JSX时，会解析并执行所有嵌入的表达式。你写的onClick={this.consoleLog("link clicked")}会在组件渲染阶段就立刻调用this.consoleLog方法，而不是等到点击事件触发时才执行——这就是为什么页面一加载控制台就打印日志，点击反而没反应的原因。

修复方案 #

我们需要给onClick传递一个函数引用，或者用箭头函数包裹你的函数调用，让它只在点击时执行：

方案1：不需要传额外参数时，直接传函数引用

如果不需要给consoleLog传递"link clicked"这类参数，直接写函数名即可：

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

React会在点击时自动把事件对象e传给consoleLog方法。

方案2：需要传额外参数时，用箭头函数包裹

如果你需要传递自定义参数，用箭头函数包裹你的函数调用，这样只有点击时才会执行内部的函数：

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

同时记得修改你的consoleLog方法来接收参数：

consoleLog = (message) => {
  console.log(message)
}

完整修正后的代码 #

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

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

  consoleLog = (message) => {
    console.log(message)
  }

  render() {
    return (
      <div>
        <h3>This is my homepage that contains components</h3>
        <a href="#" onClick={() => this.consoleLog("link clicked")}>My Button</a>
      </div>
    )
  }
}

另外还有个小细节：href="#"会导致页面跳转回顶部，如果你不想让页面跳转，可以改成href="javascript:void(0)"，或者在事件处理函数里调用e.preventDefault()来阻止默认行为哦～

内容的提问来源于stack exchange，提问作者Paul A