不明白為什么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元素。