React 的onclick事件在渲染后自动执行问题

原因:

  onClick事件如果包含() ,就会变成执行函数,从而导致这个结果

错误:

 1   render() {
 2     return (
 3       <li onClick={() => { this.clickShow() }}>
 4         <span>{this.props.list.title}:</span>
 5       </li>
 6     )
 7   }
 8   clickShow = () => {
 9     alert(1)
10   }

解决:

  1. 如果事件函数不需要参数,那么去除() 即可;

  2. 如果事件函数需要参数,那么使用箭头函数包括即可;

 1   render() {
 2     return (
 3       <li onClick={() => { this.clickShow(value) }}>
 4         <span>{this.props.list.title}:</span>
 5       </li>
 6     )
 7   }
 8   clickShow = (value) => {
 9     alert(value)
10   }
原文地址:https://www.cnblogs.com/xuhua123/p/13262046.html