我试图加密REACT中的密码，以便每个字母都打印为星号`*`

Question

我正在尝试一种方式，以便在用户单击提交后，它会输出名称和密码。但是，我希望密码被asterisk取代。据我所知，当用户输入密码时，会立即用星号替换。我想要做的是显示星号。此外，我想稍后提醒你说Hello <name> Your Password ****** Has been saved!

继承我的代码：

import React, { Component } from "react";

class Form extends Component {
  // Setting the initial values of this.state.username and this.state.password
  state = {
    firstName: "",
    password: ""
  };
  handleInputChange = event => {
    // Getting the value and name of the input which triggered the change
    const value = event.target.value;
    const name = event.target.name;

    // Updating the input's state
    this.setState({
      [name]: value
    });
  };
  handlePasswordChange = event => {
    // Getting the value and name of the input which triggered the change
    const value = event.target.value.replace(/[^A-Za-z]/g, "*");
    const name = event.target.name;

    // Updating the input's state
    this.setState({
      [name]: value
    });
  };

  handleFormSubmit = event => {
    event.preventDefault();
    if ((!this.state.username) && (!this.state.password)) {
      alert("forgot something");
    } else if (this.state.password.length < 6) {
      alert("create a longer password");
    } else {
      this.setState({
        username: "",
        password: ""
      })
    }
  }

  render() {
    return (
      <form>
        <p>Username: {this.state.username}</p>
        <p>Password: {this.state.password}</p>
        <input
          value={this.state.username}
          name="username"
          onChange={this.handleInputChange}
          type="text"
          placeholder="First Name"
        />
        <input
          value={this.state.password}
          name="password"
          onChange={this.handlePasswordChange}
          type="password"
          placeholder="Password"
        />
        < button onClick={this.handleFormSubmit}>Submit</button>
      </form>
    );
  }
}
export default Form;

我的尝试是在handlePassowrdChange()方法

Answer 1

<p>Password: {'*'.repeat(this.state.password.length)}</p>

密码更改时不需要存储星号。以上将为您提供一串与用户输入的密码长度相同的星号。