Question

我很难让我的显示/隐藏作为接近和开放的眼睛图标显示密码我仍然是新的工作与classNames作出反应，我希望你能帮助我

<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>

Answer 1

如果您尝试将班级添加到范围中，则需要在className道具中执行该逻辑。

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>

如果您正在对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>

Answer 2

我终于修好了。

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>

}

如何在ReactJs中的显示/隐藏中将单词更改为图标

2 个答案: