React-from表单

import React, { Component } from 'react';
class Form extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "请输入...",
            sex: "男",
            hobby: [
                { name: "篮球", checked: false },
                { name: "羽毛球", checked: false },
                { name: "乒乓球", checked: false },
                { name: "足球", checked: false }
            ]
        }
    }
    changename = (e) => {
        let ele = e.target;
        if (e.type === "focus") {
            this.setState({
                name: ""
            });
        }
        else if (e.type === "blur") {
            if (ele.value === "") {
                this.setState({
                    name: "请输入..."
                });
            }
            else{
                console.log(ele.value);
            }
        }
        else {
            this.setState({
                name: ele.value
            });
        }
    }
    // sex
    changesex=(e)=>{
        let ele=e.target;
        if(ele.checked)
        {
            // setState  方法是异步更新
            this.setState({
                sex:ele.value
            });

        }
    }
    //复选框按照索引匹配
    // 如果事件的方法传参 event对象在参数的后边
    ckbox(index,event){
        let hobby=this.state.hobby;
        let ele=event.target;
        if(ele.checked){
            hobby[index].checked=true;
        }
        else{
            hobby[index].checked=false;
        }
        this.setState({
            hobby:hobby
        });
    }
    getdata(){
        console.log(this.state.name,this.state.sex,this.state.hobby);
    }
    render() {
        return (<div>
            <p>表单</p>
            <input type="text" value={this.state.name} onBlur={this.changename} onFocus={this.changename} onChange={this.changename} /><br/>
            <input type="radio" value="男" checked={this.state.sex==="男"}  onChange={this.changesex}  name="sex"/>男
            <input type="radio" value="女" checked={this.state.sex==="女"}   onChange={this.changesex} name="sex"/>女

            {
               this.state.hobby.map((val,index)=>{
               return <h5 key={index}><input type="checkbox" checked={val.checked} value={val.name} onChange={this.ckbox.bind(this,index)}/>{val.name}</h5>
               })
            }
            <button onClick={this.getdata.bind(this)}>获取表单值</button>
        </div>);
    }
}

export default Form;