javascript - ReactJS 与 TypeScript 未渲染到 DOM

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 文件中，是吗？如果你在 TSX 内进行类似的转换，你必须这样做

document.getElementById("usernameBox") as HTMLInputElement

您还可以将事件对象传递给 validateUsername() 函数并从中获取值:

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