为什么渲染的图标没有响应状态的变化？答案

【问题标题】：Why are the rendered icons not responding to changes in state?为什么渲染的图标没有响应状态的变化？
【发布时间】：2018-09-11 18:24:01
【问题描述】：

我正在尝试实现切换表单密码输入的非常基本的功能。很简单，我希望用户在输入密码时隐藏或显示密码。

我正在使用 React，Semantic UI React 是 CSS 框架。这是一个相当简单的任务，但是我遇到了图标元素对状态变化没有反应的问题。准确地说，图标的相应 CSS 类从 eye 更改为 eye slash 符合预期。但是，渲染的图标不会对这种状态变化做出反应，并且保持不变，即眼睛而不是斜眼。奇怪的是，此输入字段的type 属性从text 更改为password，并呈现正确的输入表单（即隐藏或显示密码）。那么，什么给了？

下面是组件的代码 sn-p。我还包括了一张已填充相关字段的渲染表单的图像。

更改密码表格

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Icon, Input } from 'semantic-ui-react';

const styles = {
  //...
};

class PasswordField extends Component {
  state = {
    showPassword: false,
  };

  onTogglePassword = () =>
    this.setState(prevState => ({
      showPassword: !prevState.showPassword,
    }));

  render() {
    const { showPassword } = this.state;
    const { name, value, label, onChange } = this.props;

    return (
      <Form.Field style={styles.formField}>
        <label style={styles.label}>{label}</label>
        <Input
          style={styles.input}
          type={showPassword ? 'text' : 'password'}
          name={name}
          value={value}
          onChange={onChange}
          icon={
            <Icon
              name={showPassword ? 'eye slash' : 'eye'}
              link
              onClick={this.onTogglePassword}
            />
          }
        />
      </Form.Field>
    );
  }
}

PasswordField.propTypes = {
    //...
}

export default PasswordField;

渲染表单的图像

【问题讨论】：

刚刚粘贴了您的代码。开箱即用。 codesandbox.io/s/jjq56pyp5w
您的代码没有问题。
@MurliPrajapati 嗯，这很奇怪。由于某种扭曲的原因，它对我不起作用。
我建议尝试一些其他图标，比如眼睛斜线轮廓
你的问题解决了吗？

标签： javascript reactjs semantic-ui semantic-ui-react

【解决方案1】：

他们实际上是响应状态变化，问题出在斜线图标上！

您可以使用不同的图标名称进行测试，而不是 eye slash，它应该可以工作。示例：

name={showPassword ? 'chevron circle down' : 'eye'}

【讨论】：

【解决方案2】：

我有同样的问题。由于某种原因，它们无法正确渲染。我使用hide 和unhide 修复了它。它们是相同的图标，但名称不同。

【讨论】：

【解决方案3】：

添加这一行

 i.icon.eye.slash.outline:before { content: "\f070"; }

进入semantic.min.css，问题就解决了。

【讨论】：