渲染上验证用户输入

Question

新的输入字段我有用户在其中输入自己的用户ID，如果有效，则API发送动态密码至用户的电话本登录组件。我想在验证后更改输入字段的状态，并在同一页面（同一输入字段）接受验证的otp编号。我怎样才能做到这一点 ？

我想只有一个输入框，在这里你验证用户名后输入用户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。一旦用户标识已被验证，通过检查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，您有用户在同一 字段中输入密码。

您也可以做到这一点，但是对于你需要把一些条件规

1. 条件对输入字段的值，它最初将有用户ID，之后，这将有otp值。

2. 条件在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来获得输入字段的值。