React项目中Alert页面加载自动触发，如何实现仅点击li才弹窗

问题原因 #

• 你给onClick属性绑定的是函数执行的返回值，而不是函数本身：在React组件渲染阶段，<li onClick={clickhandle(props)}>这行代码会直接调用clickhandle函数，所以页面一加载就会连续触发alert，而非点击时才执行。

修正方案 #

方案1：用箭头函数包裹事件处理逻辑 #

直接在onClick绑定的位置写箭头函数，点击时才会执行内部的clickhandle调用，只需修改Stud组件代码即可：

function Stud(props) {
  // 用箭头函数包裹，点击时才执行调用
  return <li onClick={() => clickhandle(props)}> { props.name }</li>;
}

方案2：修改事件处理函数为高阶函数 #

把clickhandle改写成接收参数后返回待执行函数的形式，同样可以实现点击时才触发逻辑：

// 改写clickhandle为高阶函数
function clickhandle (name) {
  return function() {
    alert("you clicked on" + name)
  }
}

function Stud(props) {
  return <li onClick={clickhandle(props.name)}> { props.name }</li>;
}

额外优化建议：你用map渲染列表的时候，需要给每一项加唯一的key属性，避免React的渲染警告，修改App组件里的遍历逻辑：

{students.map((student) => <Stud key={student} name={student} />)}

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