专注于web开发

最近项目中有一个需求：清除浏览器记住密码。故写了这么个组件。

import React from 'react';
import { Input } from 'antd';

class PasswordInput extends React.Component {

  static getDerivedStateFromProps(nextProps) {
    if ('value' in nextProps) {
      return {
        ...(nextProps.value || {}),
      };
    }
    return null;
  }

  constructor(props) {
    super(props);

    const value = props.value;
    this.state = {
      showValue: value,
      value,
    };
  }
  componentWillReceiveProps(newProps) {
    if (newProps.value === '') {
      this.setState({ value: '', showValue: '' });
    }
  }
  handleChange = (e) => {
    let newValue;
    const value = e.target.value;
    const currValue = value[value.length - 1]; // 当前值
    const showValue = new Array(value.length + 1).join('*');
    const oldValue = this.state.value;
    if (currValue !== '*') {
      newValue = oldValue.substr(0, showValue.length - 1) + currValue;
    } else {
      newValue = oldValue.substr(0, showValue.length);
    }
    this.setState({ value: newValue, showValue });
    this.triggerChange(newValue);
  }
  triggerChange = (changedValue) => {
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(changedValue);
    }
  }
  render() {
    return (<span>
      <Input
        value={this.state.showValue}
        type="text"
        onChange={this.handleChange}
      />
    </span>);
  }
}


export default PasswordInput;

打赏