Почему отображаемые значки не реагируют на изменения состояния? - PullRequest
Новая
       8

Почему отображаемые значки не реагируют на изменения состояния?

0 голосов
/ 11 сентября 2018

Я пытаюсь реализовать самые базовые функции переключения ввода пароля в форме. Проще говоря, я хотел бы, чтобы пользователь скрывал или отображал пароль при его вводе.

Я работаю с React, а Semantic UI React является CSS-фреймворком. Это довольно простая задача, но у меня возникли проблемы с тем, что элемент icon не реагирует на изменения состояния. Чтобы быть точным, соответствующий класс 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;

Визуализированное изображение формы

enter image description here

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

У меня была такая же проблема. По некоторым причинам они не делают правильно. Я исправил это, используя hide и unhide. Это одинаковые значки с разными именами.

0 голосов
/ 09 января 2019

Они на самом деле реагируют на изменения состояния, проблема заключается в иконке с косой чертой!

Вы можете проверить, используя другое имя иконки, вместо косая черта , и она должна работать.Пример: 

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