输入验证内部反应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> 
    ); 
}