mystraight
mystraight

react 实现双向绑定以及事件绑定

import React from 'react';

class Test extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            email: "",
            intro: "",
            city: "hz",
            male: true, //性别
            emailError: "",
            introError: ""
        }
    }
    handleEmail (e) {
        let value = e.target.value;
        let error = '';
        if(!(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value))) {
            error = '请输入正确的Email';
        }
        this.setState({
            email: value,
            emailError: error
        });
    }
    handleIntro (e) {
        let value = e.target.value;
        let error = "";
        if(value.length < 10) {
            error = "介绍不能少于十个字";
        }
        this.setState({
            intro: value,
            introError: error
        });
    }
    handleCity(e) {
        let value = e.target.value;
        this.setState({
            city: value,
        });
    }
    handleGender(e) {
        let male = !!(e.target.value === 'MALE');
        this.setState({
            male: male
        });
    }
    getData (){
        console.log(this.state)
    }
    render () {
        return (
            

                

                    
                    'text' name='intro' id='intro' value={this.state.email} onChange={this.handleEmail.bind(this)}/>
                    {this.state.emailError}