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 (
            

                

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

                    'intro'>intro:
                    'text' name=<span class="hljs-string">'intro'</span> id=<span class="hljs-string">'intro'</span> <span class="hljs-keyword">value</span>={<span class="hljs-keyword">this</span>.state.intro} onChange={<span class="hljs-keyword">this</span>.handleIntro.bind(<span class="hljs-keyword">this</span>)}/>
                    <span>{<span class="hljs-keyword">this</span>.state.introError}</span>
                
                

                    'city'> :
                    <select name='city' id='city' value={this.state.city} onChange={this.handleCity.bind(this)}>
                        value='hz'> 
                        value='bj'> 
                        value='sh'> 
                    select>
                
                

                     :
                    'radio' name='gender' checked={this.state.male} onChange={this.handleGender.bind(this)}
                           value='MALE'/>
                    'radio' name='gender' checked={!this.state.male} onChange={this.handleGender.bind(this)}
                           value='FEMALE'/>
                
                this.getData.bind(this)}> 
            
        )
    }
}
export { Test as default}