如何更改顯示/隱藏在ReactJs中的圖標字

我有困難讓我的顯示/隱藏作爲密切和睜開的眼睛圖標顯示密碼我仍然是新的與classNames一起工作的反應，我希望你能幫助我如何更改顯示/隱藏在ReactJs中的圖標字

<span className="password__show" onClick={this.showHide}> 
{this.state.type === 'input' ? 
"fa fa-fw fa-eye field-icon " : "fa fa-fw fa-eye-slash field-icon "} 
</span>

來源

2017-06-15 P.Macs

有關如何使用圖標，請參見[FontAwesome文檔]（http://fontawesome.io/icon/eye/）。 – fqhv

@fqhv謝謝你的建議，但是如何將它插入條件... –

[Chase DeAnda的回答]（https://stackoverflow.com/a/44577036/5817001）應該幫助你。 – fqhv

我終於固定它。

render() { 
     let show = (<i className="fa fa-eye"></i>); 
     let hide = (<i className="fa fa-eye-slash"></i>); 

return{ 
<span className="password__show" onClick={this.showHide}> 
        {this.state.type === 'input' ? hide:show} 
        </span> 

}

來源

2017-06-15 21:43:33

靈感來自Chase DeAnda的答案 –

如果您試圖將該類添加到跨度，則需要在className prop中執行該邏輯。

var icon_class = this.state.type === 'input' ? "fa fa-fw fa-eye field-icon " : "fa fa-fw fa-eye-slash field-icon "; 
<span className={"password__show " + icon_class} onClick={this.showHide}></span>

如果你正在做一個有條件的渲染跨度內容則是這樣的：

var icon_class = this.state.type === 'input' ? "fa fa-fw fa-eye field-icon " : "fa fa-fw fa-eye-slash field-icon "; 
<span className="password__show" onClick={this.showHide}> 
    <i className={icon_class} /> 
</span>

來源

2017-06-15 21:06:50

錯誤說這是一個保留字 –

是的，對不起，我注意到，只要我發佈它。我更新了我的答案，應該工作。 –

即時通訊部分實際上有問題.. –

如何更改顯示/隱藏在ReactJs中的圖標字

回答

相關問題