ReactJS mit TypeScript, das nicht zum DOM rendert

Question

Ich arbeite an einem kleinen Projekt, nur um ReactJS und State zu lernen, und ich soll meine eigene Art des Zustandes implementieren. Ich denke, ich habe es herausgefunden, aber ich kann nicht verstehen, warum das nicht funktioniert.

ich einen Fehler halte, die sagt, kann nicht Eigenschaft ‚Wert‘ von null lesen:

import * as React from 'react'; 
import * as ReactDOM from 'react-dom'; 
import UsernameLogic from './validation.ts'; 
import PasswordValidation from './passwordValidation.ts'; 

declare function require(prop: string): string; 
require('./app.scss'); 

interface Props { 

} 

export default class App extends React.Component<Props, {}> { 

    public criteria1 = { 
     errorClass: 'errors', 
     errorMessage: 'You must enter a Username!', 
     isValid: false 
    } 

    public criteria2 = { 
     errorClass: 'errors', 
     errorMessage: 'Username must be at least 3 characters long', 
     isValid: false 
    } 

    public criteria3 = { 
     errorClass: 'approved', 
     errorMessage: 'Username must not have numeric characters', 
     isValid: true 
    } 

    public criteria4 = { 
     errorClass: 'errors', 
     errorMessage: 'Username must match existing User', 
     isValid: false 
    } 

    public criteria5 = { 
     errorClass: 'errors', 
     errorMessage: 'You must enter a Password!', 
     isValid: false 
    } 

    public criteron = [this.criteria1, this.criteria2, this.criteria3, this.criteria4, this.criteria5]; 





    render() { 
     return (
      <form name="loginForm" className="loginForm"> 
       <div> 
        <div> 
         <input type="text" defaultValue="" placeholder="Username" id="usernameBox" className="inputField" onChange={UsernameLogic.validateUsername(this.criteron)}/> 
        </div> 
        <div> 
         <div id="R1" className={this.criteria1.errorClass}>{this.criteria1.errorMessage}</div> 
         <div id="R2" className={this.criteria2.errorClass}>{this.criteria2.errorMessage}</div> 
         <div id="R3" className={this.criteria3.errorClass}>{this.criteria3.errorMessage}</div> 
         <div id="R4" className={this.criteria4.errorClass}>{this.criteria4.errorMessage}</div> 
        </div> 
        <div> 
         <input type="password" defaultValue="" placeholder="Password" id="passwordBox" className="inputField" onChange={PasswordValidation.validatePassword(this.criteron)}/> 
        </div> 
        <div> 
         <div id="R5" className={this.criteria5.errorClass}>{this.criteria5.errorMessage}</div> 
        </div> 
       </div> 
       <input type="submit" /> 
      </form> 
     ); 
    } 
} 



ReactDOM.render(<App />, document.getElementById("app")); 

Dies ist meine Logik:

export default class UsernameLogic { 
    constructor(public validateUsername) { 
     this.validateUsername = validateUsername; 
    } 

    public static validateUsername(currentState) { 
     let V = ((<HTMLInputElement>document.getElementById("usernameBox")).value === null) ? '': ((<HTMLInputElement>document.getElementById("usernameBox")).value) ; 

     if(currentState[0].isValid === false || 
      currentState[1].isValid === false || 
      currentState[2].isValid === false) { 
     this.checkFirstCriteria(V, currentState); 
     this.checkSecondCriteria(V, currentState); 
     this.checkThirdCriteria(V, currentState); 
      } else { 
     this.checkFourthCriteria(V, currentState); 
      } 

    } 

    static checkFirstCriteria(v, currentState) { 
     if(v.length > 0) { 
      let state: any; 
      return (state = [ 
      { 
       errorClass: 'approved', 
       errorMessage: 'You must enter a Username!', 
       isValid: true 
      }, 
      ...currentState.slice(1,4) 
      ]); 
     } 
     if(v.length === 0) { 
      let state: any; 
      return (state = [ 
      { 
       errorClass: 'errors', 
       errorMessage: 'You must enter a Username!', 
       isValid: false 
      }, 
      ...currentState.slice(1,4) 
      ]); 
     } 
    } 

    static checkSecondCriteria(v, currentState) { 
     if(v.length >= 3) { 
      let state: any; 
      return(state = [ 
       ...currentState.slice(0,0), 
       { 
        errorClass: 'approved', 
        errorMessage: 'Username must be at least 3 characters long', 
        isValid: true 
       }, 
       ...currentState.slice(2,4) 
      ]); 
     } 
     if(v.length < 3) { 
      let state: any; 
      return (state = [ 
       ...currentState.slice(0,0), 
       { 
        errorClass: 'errors', 
        errorMessage: 'Username must be at least 3 characters long', 
        isValid: false 
       }, 
       ...currentState.slice(2,4) 
      ]); 
     } 

    } 


    static checkThirdCriteria(v, currentState) { 
     if(v = /\[0-9]/) { 
      let state: any; 
      return (state = [ 
       ...currentState.slice(0,1), 
       { 
        errorClass: 'errors', 
        errorMessage: 'Username must not have numeric characters', 
        isValid: false 
       }, 
       ...currentState.slice(3,4) 
      ]); 
     } 
     if(v != /\[0-9]/) { 
      let state: any; 
      return (state = [ 
       ...currentState.slice(0,1), 
       { 
        errorClass: 'approved', 
        errorMessage: 'Username must not have numeric characters', 
        isValid: true 
       }, 
       ...currentState.slice(3,4) 
      ]); 
     } 
    } 


    static checkFourthCriteria(v, currentState) { 
     let availableUser = ['dustin','sule', 'lakshmi']; 
     if(v === availableUser[0] || 
      v === availableUser[1] || 
      v === availableUser[2]) { 
       let state: any; 
       window.setTimeout(()=>{ 
        return (state = [ 
         ...currentState.slice(0,2), 
         { 
          errorClass: 'approved', 
          errorMessage: 'Username must match existing User', 
          isValid: true 
         }, 
         ...currentState.slice(4,4) 
        ]); 
       }, 300) 
      } else { 
       let state: any; 
       window.setTimeout(()=>{ 
        return (state = [ 
         ...currentState.slice(0,2), 
         { 
          errorClass: 'errors', 
          errorMessage: 'Username must match existing User', 
          isValid: false 
         }, 
         ...currentState.slice(4,4) 
        ]); 
       }, 300) 
      } 

    } 



} 

Also, wenn jemand braucht mehr Informationen oder kann mir helfen das wäre toll. Es wird nicht einmal rendern, aber es wird irgendwie zu meinem onChange Event kommen.

Answer 1

Diese Besetzung ist nicht in einer .tsx Datei ist es? Wenn Ihr eine Besetzung wie das Innere TSX tun haben Sie

document.getElementById("usernameBox") as HTMLInputElement 

auch zu tun, können Sie das Ereignis Objekt in den validateUsername() Funktion übergeben und den Wert von dem bekommen:

public static validateUsername(event, criterion) { 
    let V = event.target.value;