React：如何在输入每个字符时使密码字符可见，并在反应的几个时间间隔后隐藏（*）？

Question

我希望我的密码字段行为如此图所示

我发现使用 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"));

这是与 jQuery 的解决方案链接

帮助将不胜感激。

Answer 1

有很多方法可以做到这一点，但这里有一个：

 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>

希望它有所帮助，大家编码良好！

Answer 2

我发现我做的解决方案唯一的错误是在 onChange 中设置和调用 setTimeout 所以它永远不会取消/清除实际的 setTimeout

这是解决方案

 const styles = { facebookBtn: { backgroundColor: "rgb(51, 89, 157)" }, form: { textAlign: "center" } }; class Login extends React.Component { constructor(props) { super(props); this.hideAll = setTimeout(() => {}, 0); 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 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(this.hideAll); this.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"));

 <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>