不明白为什么onclick事件不触发

Question

我已经获得了包含图片的画廊。 在每张图像上，有3个图标，当您单击它们时它们应该执行操作。 我正在尝试激活图像图标上的onclick事件，但没有任何反应。 图像图标是在font-awsome的渲染功能中创建的。 我是JavaScript新手。

我一直在尝试在网站上搜索其他问题，但是没有一种解决方案适合我。

我要激活的功能：

setNewSize() {

    const size = 500
    this.setState({
            size
        });

  }

这里的问题：

 render() {
   return (
     <div
       className="image-root"
       style={{
         backgroundImage: `url(${this.urlFromDto(this.props.dto)})`,
         width: this.state.size + 'px',
         height: this.state.size + 'px'
       }}
       >
       <div>

         <FontAwesome className="image-icon" name="clone" title="clone"/>  
         <FontAwesome className="image-icon" name="filter" title="filter" />
         <FontAwesome className="image-icon" name="expand" title="expand" onclick={ this.setNewSize} />
       </div>


     </div>
   );
 }


}

Answer 1

React使用CamelCase约定，因此您应该放置onClick={this.setNewSize}而不是onclick={this.setNewSize} 。 那对你有用吗？

Answer 2

问题是onclick={ this.setNewSize}

在反应中，应该是onClick ，这样改变；

在React中处理事件与在HTML中处理事件相似，但有一些主要区别：

1. React事件使用camelCase命名，而HTML事件通常使用小写字母来引用
2. 在JSX中，您将函数作为事件处理程序传递，而不是函数名称（字符串）传递
3. 您不能返回false来阻止默认行为。 相反，您应该调用e.preventDefault（）;。

希望对您有所帮助，不要忘记绑定方法。

Answer 3

您应该使用onClick，但也不要忘记绑定setNewSize，您可以通过三种方式执行此操作

1. onclick={ this.setNewSize.bind(this)}

2. constructor(props) { super(props); this.setNewSize = this.setNewSize.bind(this); } constructor(props) { super(props); this.setNewSize = this.setNewSize.bind(this); } constructor(props) { super(props); this.setNewSize = this.setNewSize.bind(this); } 3. const setNewSize = () => {....}

Answer 4

您需要了解的几件事

1. FontAwesome是您编写的或从库中使用的自定义反应组件

2. 传递给自定义react组件的属性将作为prop传递给组件，除非在组件内使用并传递给DOM元素，否则它们不会产生任何影响。 要了解有关此内容的更多信息，请查看此帖子

   3.您必须在构造函数中或使用箭头函数绑定方法，以在其中正确使用this 。

要解决上述问题，如果您正在从库中使用组件，则需要检查组件的文档，并查看处理onClick事件需要采取什么措施。 在骆驼的情况下，很有可能是onClick 。

如果您是自己编写组件的，请确保按照链接文章中的说明解决问题。 将prop作为偶数传递给DOM元素。