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中的事件处理类似，但有一些主要区别：

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

希望它会有所帮助，并且不要忘记绑定方法。

Answer 3

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

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

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

Answer 4

您需要了解的几件事

FontAwesome是由您编写或从库中使用的自定义react组件
传递给自定义react组件的属性将作为prop传递给组件，除非在组件内使用并传递给DOM元素，否则它们不会起作用。要了解有关此支票this post
的更多信息
3。您必须在构造函数中或使用箭头函数绑定方法，以在其中正确使用this。

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

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

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

4 个答案: