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