輸入驗證內部反應js組件

Question

我試圖在反應js中創建一個登錄表單。我的代碼如下

import React, { Component } from 'react'; 
import styles from './Background.css'; 
import withStyles from '../../decorators/withStyles'; 
import Link from '../Link'; 
import Navigation from '../Navigation'; 

@withStyles(styles) 
class Background extends Component {  
render() { 
return (
    <form id="login">   
     <input id="username" placeholder="username" type="text"></input> <br/><br/><br/>           
     <input id="password" placeholder="password" type="password"></input><br/><br/><br/><br/>                
     <a id="btn" href="/search" onClick={Link.handleClick}>SUBMIT</a>     
    </form> 
); 
} 
} 

export default Background; 

我想驗證用戶名和密碼，例如{Link.handleClick}只有在輸入用戶名和密碼時纔會被觸發。我可以在同一個組件中添加一個函數嗎？或者我如何實現驗證？

Answer 1

是的，您可以驗證相同組件內的用戶名和密碼。 如果我驗證用戶輸入時的檢查。 您也可以在這裏找到其他反應事件。 https://facebook.github.io/react/docs/events.html

試試這個

validateUsername(event) { 
    var username = event.target.value; 
    /*validate something ...*/ 
} 

validatePassword(event) { 
    var password = event.target.value; 
    /*validate something ...*/ 
} 


render() { 
    return (
     <form id="login"> 
      <input id="username" placeholder="username" type="text" onInput={this.validateUsername}></input> <br/><br/><br/> 
      <input id="password" placeholder="password" type="password" onInput={this.validatePassword}></input><br/><br/><br/><br/> 
      <a id="btn" href="/search" onClick={Link.handleClick}>SUBMIT</a> 
     </form> 
    ); 
}