Question

我在Reactjs中的img上调用函数时遇到问题：

这是我的组件：

onclick

我收到此错误：

index.js：1375警告：无效的事件处理程序属性onClick。做过你是说{{1}}？

我不知道为什么或如何正确声明该函数，因为它不会传递给我的函数，如果有人可以帮助我，我将不胜感激

Answer 1

错误告诉您，您应该使用onClick。与普通的HTML不同，JSX属性区分大小写，因此onclick与onClick不同-且click事件调用onClick。

Answer 2

就像错误一样，您应该使用onClick而不是onclick

<div className="computador" id="computador">
                <ul id="computador-escolha">
                    <li><a id="computador-escolha-1" onclick={() => jogar(1)}> <img src={pedra} alt="" /> </a></li>
                    <li><a id="computador-escolha-2" onclick={() => jogar(2)}> <img src={papel} alt="" /> </a></li>
                    <li><a id="computador-escolha-3" onclick={() => jogar(3)}><img src={tesoura} alt="" /></a></li>
                </ul>
</div>

而且您无法将jogar()方法调用为必须为onClick事件提供的字符串，例如onClick={() => jogar(2)}

Answer 3

我认为错误消息很清楚是什么问题-在React中没有onclick这样的东西，您应该将其替换为onClick。

第二种情况

如果不使用花括号{}包装函数，则不会调用它，但会将其解析为string。

第三种情况

由于您立即调用该函数，因此可能会得到stack exceeded error。

onClick={() => jogar(1)}

反应无效事件onClick

3 个答案:

第二种情况

第三种情况