ReactJS with TypeScript没有渲染到DOM

Question

我正在研究一个小项目来学习ReactJS和状态，我应该实现我自己的状态方法。我想我已经想通了，但我不明白为什么这不起作用。

我不断收到，说不能看空的财产“价值”的错误：

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文件中呢？如果你做的内部TSX一样，铸造你必须做

document.getElementById("usernameBox") as HTMLInputElement 

你也可以在事件对象传递给你的validateUsername（）函数，并从该值：

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