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

Question

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

我正在使用 React，Semantic UI React 作为 CSS 框架。这是一项相当简单的任务，但我遇到了图标元素无法对状态变化使用react的问题。准确地说，图标对应的 CSS 类按预期从 eye 更改为 eyelash。然而，渲染的图标不会对这种状态变化使用react，并且保持不变，即眼睛而不是斜眼。奇怪的是，该输入字段的 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'}