渲染上驗證用戶輸入

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來獲得輸入字段的值。