TypeScriptをDOMにレンダリングしないReactJS

Question

私はReactJSと状態を学ぶためにちょっとしたプロジェクトを進めています。自分のやり方を実装することになっています。わかったと思うが、なぜこれがうまくいかないのか分からない。

私がnullのプロパティ「値」を読み込めませんというエラーを取得しておいてください。

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")); 

これは私のロジックです：

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

    } 



} 

だから、誰もがもう情報を必要とするか、私を助けることができる場合それは素晴らしいだろう。それはレンダリングされませんが、私のonChangeイベントに何とかしています。

Answer 1

キャストは.tsxファイルではありませんか？あなたは、あなたが

document.getElementById("usernameBox") as HTMLInputElement 

をしなければならないTSX内部のようなキャストを行う場合も、あなたはあなたのvalidateUsername（）関数にイベントオブジェクトを渡し、そこから値を取得できます。

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