[英]ReactJS with TypeScript not rendering to the DOM
我正在研究一個小項目,只是為了學習ReactJS和狀態,我應該實現自己的狀態。 我想我已經想通了,但我無法理解為什么這不起作用。
我一直收到一條錯誤,指出無法讀取null的屬性'value':
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事件。
那個演員.tsx
不在.tsx
文件中呢? 如果你在TSX內做類似的演員,你必須這樣做
document.getElementById("usernameBox") as HTMLInputElement
您還可以將事件對象傳遞給validateUsername()函數並從中獲取值:
public static validateUsername(event, criterion) {
let V = event.target.value;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.