我试图在 REACT 中加密密码,以便每个字母都将打印为星号`*`
Im trying to encrypt the password in REACT so that every letter will printout as asterisk ` * `
我正在尝试一种方法,以便在用户单击提交后打印出名称和密码。但是,我希望将密码替换为 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()
方法中
<p>Password: {'*'.repeat(this.state.password.length)}</p>
您不需要在密码更改时存储星号。以上将为您提供一串与用户输入的密码长度相同的星号。
我正在尝试一种方法,以便在用户单击提交后打印出名称和密码。但是,我希望将密码替换为 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()
方法中
<p>Password: {'*'.repeat(this.state.password.length)}</p>
您不需要在密码更改时存储星号。以上将为您提供一串与用户输入的密码长度相同的星号。