Question

我有这个登录组件，用户输入他的用户ID，如果有效，api会向用户的手机发送OTP。我想在验证后更改输入字段的状态，并在同一页面（相同的输入字段）上接受otp编号进行验证。我怎么能这样做？

我想只有一个输入字段，您在验证用户ID后输入用户ID，让用户在同一个（尽管是新的）字段中输入密码，而不是输入2个字段。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '', authd: false, error: false };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.deAuth = this.deAuth.bind(this);
  }
  handleChange(event) {
    this.setState({ value: event.target.value });
    event.preventDefault();
  }

  deAuth() {
    this.setState({
      authd: false,
    });
  }

  handleSubmit(event) {
    if (this.state.value != '') {
      axios
        .get(
          `https://api.appspot.com/verifyClientID/client_id=${this
            .state.value}`,
        )
        .then(res => {
          console.log(res.data.message);
          this.setState({ authd: true }); // user is authenticated
        })
        .then(axios.post('https://api.appspot.com/OTPGeneration', {
    client_id: `${this
            .state.value}`,
    }))

      event.preventDefault();
    }
  }

  render() {
    const authedForm = (this.state.authd) ? <h5 className="uk-text-center otp-sent-txt">Enter OTP that was sent to your registered mobile number.</h5>: <h5 className="uk-text-center"></h5>
    return (
      <div uk-grid>
        <img src="image/logo.png" className="logo" alt="logo" />
        <div className="uk-container">
          <img
            className="landing-image uk-align-center"
            src="image/landing2.jpg"
          />
          <h2 className="landing-text">Welcome Aboard!</h2>
        </div>

        {/*{this.state.authd && <MyModal resetAuth={this.deAuth} />}*/}

        <form
          className={`uk-align-center uk-form-width-medium ${this.state.error}`}
          onSubmit={this.handleSubmit}
        >
          <div className="uk-margin">
            <input
              className="uk-input uk-text-center"
              type="text"
              placeholder="Client ID"
              value={this.state.value}
              onChange={this.handleChange}
            />
          </div>
        </form>
        {authedForm}
        <button
          className="uk-button uk-button-primary uk-align-center login-btn"
          onClick={this.handleSubmit}
        >
          Login
        </button>

      </div>
    );
  }
}

export default Login;

Answer 1

我们可以渲染一个新的输入字段并在同一个地方隐藏旧字段？

是的，您可以使用conditional rendering。验证用户ID后，通过检查this.state.authd的值来呈现不同的输入字段。

像这样：

<div className="uk-margin">
    {this.state.authd ?
        <input
            className="uk-input uk-text-center"
            type="text"
            placeholder="Client ID"
            value={this.state.value}
            onChange={this.handleChange}
        />
    :
        <input
            className="uk-input uk-text-center"
            type="otp"
            placeholder="OTP"
            value={this.state.otp}
            onChange={/**/ change function}
        />
    }
</div>

我想只有一个输入字段，您可以在其中输入用户ID 验证用户ID让用户输入相同的密码字段。

您也可以实现这一目标，但为此您需要设置一些条件 -

输入字段值的条件，最初它将具有用户ID，之后它将具有otp值。
onChange事件中的条件（如果您对两者使用相同的函数），您想要更新哪个值。

像这样：

<input
    name={this.state.authd ? "otp" : "value"}
    className="uk-input uk-text-center"
    type={this.state.authd ? "number" : "text"}
    placeholder={this.state.authd ? "OTP" : "Client ID"}
    value={this.state.authd ? this.state.otp : this.state.value}
    onChange={this.handleChange}
/>

handleChange(event){
    let target = event.target;
    this.setState({
        [target.name]: target.value;
    })
}

建议：如果您想使用相同的字段，我建议您使用uncontrolled component，在这种情况下，一旦用户点击，您就不需要设置多个条件提交按钮，使用ref获取用户输入的值。

<input
    ref={el => this.input = el}
    className="uk-input uk-text-center"
    type={this.state.authd ? "number" : "text"}
    placeholder={this.state.authd ? "OTP" : "Client ID"}
/>

现在使用this.input.value获取输入字段的值。

在验证用户输入上呈现新的输入字段

1 个答案: