React滑块组件中<img>标签onClick事件不生效问题求助

嘿，这问题其实是个很常见的新手小失误！我一眼就瞅出来啦——你在给<img>绑定onClick的时候，没有真正调用你的函数。

问题出在哪？ #

你现在的代码是这样的：

<img onClick={() => anterior} src={ArrowLeft} ... />

这里的() => anterior只是返回了anterior函数的引用，但并没有执行它。相当于你告诉React“点击的时候给我这个函数”，而不是“点击的时候执行这个函数”，自然不会触发任何效果。

两种修正方案 #

你可以任选一种：

方案1：直接传递函数引用（推荐，更简洁）

不需要嵌套箭头函数，直接把函数本身传给onClick：

<img onClick={anterior} src={ArrowLeft} style={{'pointer-events': "all"}} alt="Before"/>
<img onClick={siguiente} src={ArrowRight} style={{'pointer-events': "all"}} alt="After"/>

方案2：在箭头函数里调用函数（加括号）

如果之后需要给函数传递参数，这种写法会更灵活：

<img onClick={() => anterior()} src={ArrowLeft} style={{'pointer-events': "all"}} alt="Before"/>
<img onClick={() => siguiente()} src={ArrowRight} style={{'pointer-events': "all"}} alt="After"/>

修正后的完整组件代码 #

const SliderInstructors = () => { 
  const siguiente = () => { 
    console.log('Siguiente'); 
    alert('You clicked me!'); 
  }; 
  const anterior = () => { 
    console.log('Anterior'); 
    alert('You clicked me!'); 
  }; 
  return( 
    <> 
      {/* Controles */} 
      <div className="controls"> 
        <img onClick={anterior} src={ArrowLeft} style={{'pointer-events': "all"}} alt="Before"/> 
        <img onClick={siguiente} src={ArrowRight} style={{'pointer-events': "all"}} alt="After"/> 
      </div> 
    </> 
  ) 
} 
export default SliderInstructors;

补充说明 #

你提到另一个组件的<img> onClick能正常工作，那大概率是那个组件里你用了上面两种正确写法中的一种，所以没出问题。刚学React的时候，函数调用的语法细节很容易搞混，多试几次就熟练啦！

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