首页 / 前端 / React.js / react hooks函数编程中绑定点击事件会自动执行?
react hooks函数编程中绑定点击事件会自动执行?
歪脖37684 React.js
2086浏览
2022-04-27 23:18:30

在使用hooks绑定点击事件后发现每次刷新页面,都会自动执行绑定的事件方法:

// 错误写法
import { useState } from 'react'
export default () => {
  const [list] = useState(
    [{
      name: '主页',
        icon: '',
        link: '/isset'
      }, {
        name: '管理',
        icon: '',
      }]
  );
  const goToPath = (link) => {
    console.log(link);
  }
  return (
    <div>
    {
      list.map(item => {
        // 下面onClick出错,用箭头函数装饰一下完成间接绑定
        <div className='left-item' onClick={ goToPath(item.link) }>点击跳转</div>
      })
    }
    </div>
  )
}

解决办法:

用箭头函数装饰一下完成间接绑定即可避免:

<div className='left-item' onClick={ () => goToPath(item.link) }>点击跳转</div>
相关推荐