为什么渲染的图标不响应状态变化？

Question

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

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

下面是组件的代码段。我还提供了渲染表单的图像，其中填充了相关字段。

更改密码表格

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;

渲染表单的图像

Answer 1

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

您可以使用其他图标名称（而不是斜线）进行测试，它应该可以工作。示例：

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

Answer 2

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