Question

我正在尝试在react 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>
    );
}

反应js组件内的输入验证

1 个答案: