javascript - 反应:如何在输入每个字符时使密码字符可见,并在反应的几个时间间隔后隐藏(*)?
问题描述
我想要我的密码字段行为,如图所示
我发现很少有使用 jQuery 的解决方案并尝试将其转换为 react 但它的行为与 react 不同,因为有一个 setState 会延迟设置值。这是我的反应代码,它的行为不一致。
import React from "react";
import ReactDOM from "react-dom";
// Example JS object used for CSS styling
const styles = {
facebookBtn: {
backgroundColor: "rgb(51, 89, 157)"
},
form: {
textAlign: "center"
}
};
export class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: "",
password: "",
passHidden: ""
};
}
handleOnSubmit = e => {
e.preventDefault();
console.log("Submitted!");
};
onUserNameChange = e => {
const value = e.target.value;
this.setState({
userName: value
});
};
onHiddenPasswordChange = e => {};
onPasswordChange = e => {
const passwordValue = e.target.value;
const hiddenPassValue = this.state.passHidden;
let showLength = 1;
let hideAll = setTimeout(() => {}, 0);
let offset = passwordValue.length - hiddenPassValue.length;
if (offset > 0) {
this.setState({
passHidden:
hiddenPassValue +
passwordValue.substring(
hiddenPassValue.length,
hiddenPassValue.length + offset
)
});
} else if (offset < 0) {
this.setState({
passHidden: hiddenPassValue.substring(
0,
hiddenPassValue.length + offset
)
});
}
// Change the visible string
if (passwordValue.length > showLength) {
this.setState({
password:
passwordValue
.substring(0, passwordValue.length - showLength)
.replace(/./g, "•") +
passwordValue.substring(
passwordValue.length - showLength,
passwordValue.length
)
});
}
// Set the timer
clearTimeout(hideAll);
hideAll = setTimeout(() => {
this.setState({
password: passwordValue.replace(/./g, "•")
});
}, 1000);
};
render() {
return (
<form style={styles.form} onSubmit={this.handleOnSubmit}>
<h4>Welcome Back!</h4>
<div className="form-group row">
<input
className="input"
value={this.state.userName}
onChange={this.onUserNameChange}
type="text"
placeholder="Email"
/>
</div>
<div className="form-group row">
<input
className="input"
value={this.state.password}
onChange={this.onPasswordChange}
type="text"
placeholder="Password"
/>
</div>
<div className="form-group row">
<input
className="input"
value={this.state.passHidden}
onChange={this.onHiddenPasswordChange}
type="text"
placeholder="Password"
/>
</div>
<div className="form-group row">
<button className="btn" type="submit">
Log In
</button>
</div>
</form>
);
}
}
class Form extends React.Component {
render() {
const { children, title } = this.props;
return (
<div className="col-md-6 mx-auto">
<header>
<h1>{title}</h1>
</header>
{children}
</div>
);
}
}
ReactDOM.render(<Form children={<Login />} />, document.getElementById("root"));
帮助将不胜感激。
解决方案
有很多方法可以做到这一点,但这里有一个:
const styles = {
facebookBtn: {
backgroundColor: "rgb(51, 89, 157)"
},
form: {
textAlign: "center"
}
};
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: "",
password: "",
passHidden: ""
};
this.clocks = {};
}
handleOnSubmit = e => {
e.preventDefault();
console.log("Submitted!");
};
getLastIndexChar = string => {
return string.slice(string.length - 1);
};
hideAllChars = fieldName => {
const value = this.state[fieldName];
let password = "";
if (value.length) {
password = Array(value.length).join("•") + "•";
}
this.setState({ [fieldName]: password });
};
setFieldClock = fieldName => {
clearTimeout(this.clocks[fieldName]);
this.clocks[fieldName] = setTimeout(
() => this.hideAllChars(fieldName),
1000
);
};
getTypingHiddenPassword = value => {
return Array(value.length).join("•") + this.getLastIndexChar(value);
};
handlePasswordChanged = (fieldName, value) => {
this.setFieldClock(fieldName);
const password = this.getTypingHiddenPassword(value);
this.setState({ [fieldName]: password });
};
inputChange = ({ target: { name, value } }) => {
switch (name) {
case "password":
case "passHidden":
this.handlePasswordChanged(name, value);
break;
default:
this.setState({ [name]: value });
break;
}
};
render() {
return (
<form style={styles.form} onSubmit={this.handleOnSubmit}>
<h4>Welcome Back!</h4>
<div className="form-group row">
<input
className="input"
name="userName"
value={this.state.userName}
onChange={this.inputChange}
type="text"
placeholder="Email"
/>
</div>
<div className="form-group row">
<input
className="input"
name="password"
value={this.state.password}
onChange={this.inputChange}
type="text"
placeholder="Password"
/>
</div>
<div className="form-group row">
<input
className="input"
name="passHidden"
value={this.state.passHidden}
onChange={this.inputChange}
type="text"
placeholder="Password"
/>
</div>
<div className="form-group row">
<button className="btn" type="submit">
Log In
</button>
</div>
</form>
);
}
}
class Form extends React.Component {
render() {
const { children, title } = this.props;
return (
<div className="col-md-6 mx-auto">
<header>
<h1>{title}</h1>
</header>
{children}
</div>
);
}
}
ReactDOM.render(<Form children={<Login />} />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
希望对大家有帮助,祝大家编码愉快!
推荐阅读
- discord.js - 如何向对消息做出反应的用户添加特定角色
- ruby-on-rails - Pin 的未知属性“resource_type”
- java - 识别 Groovy jar 中缺少的导入
- firebase - 在 Android Studio 中将 Firebase 添加到 Flutter Android App 时如何将项目与 Gradle 文件同步(2020 年 4 月)
- php - PHP查询更新/删除表中动态生成的输入字段
- r - “断点”不显示日期,而是连续测量
- javascript - Typescript 中的对象类型
- jooq - 从jOOQ中的别名表中获取底层的非别名表
- wordpress - Wordpress 表单简码
- xaml - 如何在 CollectionView 上方添加 Picker