圖標的onClick問題

我有兩個圖標，確定我的流星一堆組件的觀點陣營項目圖標的onClick問題

目前，我都與特定的onClick功能，每個圖標的跨度包。有沒有辦法只用一個函數來處理這個問題，傳入一個id作爲道具？

我想有這樣的：

<span id="grid" onClick={this.handleViewBtnClick.bind(this, id)}> 
    <i className="fa fa-th" ></i> 
</span> 
<span id="list" onClick={this.handleViewBtnClick.bind(this, id)}> 
    <i className="fa fa-align-justify" ></i> 
</span>

和：

handleViewBtnClick(id) { 
    this.setState({ 
    view: id 
    }) 
}

但是，這並不產生期望的結果，而且也不任何其他東西我試過了。唯一一次我得到它的工作是當我包裝在button而不是跨度的兩個圖標。我想我可以使它透明，但有沒有辦法做到這一點，它包裝在span或根本不？

非常感謝！

來源

2017-07-03 Dominik Teiml

我敢肯定，我做到了。讓我再嘗試一次。 –

我想你想在el中包含一個id =「grid」。在任何情況下，它都不起作用（Uncaught ReferenceError：id未定義）。 –

你也不應該在'render（）'內部綁定處理函數。如果你使用了babel，最好的做法是[在構造函數或屬性初始值設定語法中]（https://facebook.github.io/react/docs/handling-events.html）。 – trixn

使用箭頭功能：

<span id="grid" onClick={() => this.handleViewBtnClick('first-id'))}> 
    <i className="fa fa-th" ></i> 
</span> 
<span id="list" onClick={() => this.handleViewBtnClick('second-id'))}> 
    <i className="fa fa-align-justify" ></i> 
</span>

來源

2017-07-03 13:27:26 tomr

好動。謝謝！ –

圖標的onClick問題

回答

相關問題