React - 密码框

最新推荐文章于 2024-07-16 19:01:32 发布

moozixiao

最新推荐文章于 2024-07-16 19:01:32 发布

阅读量1.2k

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/moozixiao/article/details/120141563

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文档介绍了一个基于Ant Design的自定义Input组件，用于创建一个密码显示切换功能。组件通过React实现，能够在用户切换显示密码时，避免密码在控制台以明文形式出现。通过移除Input的value属性来达到控制台安全，同时提供了详细的代码实现和生命周期方法，确保在组件更新时也能保持安全。

摘要由CSDN通过智能技术生成

基于 antd Input 密码框

场景

你可能有这样的需求，要求的 Input 密码框在控制台上不明文显示；随即尝试，该方案是使用 dom 的操作（removeAttribute）来隐藏 value 属性，与 antd Input 使用一致。

组件

jsx 编写

使用 antd Input 加上 Icon 来控制显示文本框内容，并在该类中传入props：id 及 onChange；
如无传 id，默认id=“password”。

import React from 'react';
import PropTypes from 'prop-types';
import { Input, Icon } from 'antd';

export default class LyPassword extends React.Component {
  static defaultProps = {};

  static propTypes = {
    onChange: PropTypes.func,
    id: PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
    };
  }  

  // 密码显示
  onShowPwd = e => {
    e.stopPropagation();
    this.setState(
      {
        isShowValue: !this.state.isShowValue,
      },
      () => {
        this.refInput.focus();

        this.removeAttributeFun();
      },
    );
  };

  // 输入变化
  onChange = e => {
    const { onChange } = this.props;
    this.setState({
      inputValue: e.target.value,
    });
    if (onChange) {
      onChange(e.target.value);
    }
  };


  render() {
    const { id, onChange, ...restProps } = this.props;
    const { inputValue, isShowValue } = this.state;
    return (
      <Input
        suffix={
          isShowValue ? (
            <Icon type="eye" onClick={this.onShowPwd} />
          ) : (
            <Icon type="eye-invisible" onClick={this.onShowPwd} />
          )
        }
        onChange={this.onChange}
        autoComplete="off"
        {...restProps}
        id={id || 'password'}
        ref={el => (this.refInput = el)}
        value={inputValue}
        type={!isShowValue ? 'password' : 'text'}
      />
    );
  }
}

去除控制台明文显示

根据以上代码，该组件的基本功能便实现了，那么需要开始对 Input 做一些处理。

封装去除 value 方法

function removeInputAttributeValue(id = 'password', key = 'value') {
  setTimeout(() => {
    document.getElementById(id) &&
      document.getElementById(id).removeAttribute(key);
  }, 0);
}

扩充组件，来实现

import React from 'react';
import PropTypes from 'prop-types';
import { Input, Icon } from 'antd';

// 移除 value 方法
function removeInputAttribute(id = 'password', key = 'value') {
  setTimeout(() => {
    document.getElementById(id) &&
      document.getElementById(id).removeAttribute(key);
  }, 0);
}

export default class LyPassword extends React.Component {
  static defaultProps = {};

  static propTypes = {
    onChange: PropTypes.func,
    id: PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
    };
  }

  componentWillMount() {
    this.removeAttributeFun();
  }

  componentWillReceiveProps() {
    this.removeAttributeFun();
  }

  componentWillUpdate() {
    this.removeAttributeFun();
  }

  // 移除 value
  removeAttributeFun = () => {
    let { id } = this.props;
    removeInputAttribute(id, 'value', true);
  };

  // 输入变化
  onChange = e => {
    const { onChange } = this.props;

    this.setState({
      inputValue: e.target.value,
    });
    if (onChange) {
      onChange(e.target.value);
    }
  };

  // 重置数据
  resetForm = () => {
    this.setState({
      inputValue: '',
      isShowValue: false,
    });
  };

  // 密码显示
  onShowPwd = e => {
    e.stopPropagation();
    this.setState(
      {
        isShowValue: !this.state.isShowValue,
      },
      () => {
        this.refInput.focus();

        this.removeAttributeFun();
      },
    );
  };

  render() {
    const { id, onChange, ...restProps } = this.props;
    const { inputValue, isShowValue } = this.state;
    return (
      <Input
        suffix={
          isShowValue ? (
            <Icon type="eye" onClick={this.onShowPwd} />
          ) : (
            <Icon type="eye-invisible" onClick={this.onShowPwd} />
          )
        }
        onChange={this.onChange}
        autoComplete="off"
        {...restProps}
        id={id || 'password'}
        ref={el => (this.refInput = el)}
        value={inputValue}
        type={!isShowValue ? 'password' : 'text'}
      />
    );
  }
}