React 的onclick事件在渲染后自動執行問題

 

原因：

　　onClick事件如果包含() ，就會變成執行函數，從而導致這個結果

錯誤：

  render() {
    return (
      <li onClick={() => { this.clickShow() }}>
        <span>{this.props.list.title}：</span>
      </li>
    )
  }
  clickShow = () => {
    alert(1)
  }

解決：

　　1. 如果事件函數不需要參數，那么去除() 即可；

　　2. 如果事件函數需要參數，那么使用箭頭函數包括即可；

  render() {
    return (
      <li onClick={() => { this.clickShow(value) }}>
        <span>{this.props.list.title}：</span>
      </li>
    )
  }
  clickShow = (value) => {
    alert(value)
  }