javascript - 我试图在 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>

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