关于React中的from的分析

import React from 'react';


class ReactForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title : 'React 表单',
            name:'',  
            gender:'1',     
            livecity:'',      
            cities:[ 
                
                '北京','上海','深圳','重庆','广州'            
            ],
            hobby:[   
                {  
                    'title':"睡觉",
                    'checked':true
                },
                {  
                    'title':"吃饭",
                    'checked':false
                },
                {  
                    'title':"敲代码",
                    'checked':true
                },
                {  
                    'title':"game",
                    'checked':true
                }
            ],
            info:'' 
        };
    };

    //处理表单提交
    handleFromSubmit = (e) => {
        e.preventDefault();
        //先处理阻止表单的默认行为
        console.log(this.state.name+" " +this.state.gender+" "+
            this.state.livecity +" "+this.state.hobby +" "+this.state.info);
    };

    //处理name在input中的输入并存入this.state.name
    handleInputNameChanging = (e) => {
        this.setState({
            name : e.target.value,
        });
    };

    handleInputGenderChanging = (e) => {
        this.setState({
            gender : e.target.value,
        });
    };

    //处理城市选择
    handleSelectCityChanging = (e) => {
        this.setState({
            livecity : e.target.value,
        });
    };

    //处理受爱好(由于进行了handleCheckboxHobbyChanging.bind(this,key)操作, 这里无所谓使用箭头函数还是普通函数)
    // handleCheckboxHobbyChanging(key)  {
    //     //console.log(this);
    //     let hobbies = this.state.hobby;
    //     hobbies[key].checked = !hobbies[key].checked;
    //     this.setState({
    //         hobby : hobbies,
    //     })
    // };

    handleCheckboxHobbyChanging = (key) => {
        let hobbies = this.state.hobby;
        hobbies[key].checked = !hobbies[key].checked;
        this.setState({
            hobby : hobbies,
        })
    };

    //处理info
    handleTextareaInfoChanging = (e) => {
        console.log(e.target.value);
        this.setState({
            info : e.target.value,
        })
    };

    render() {
        return <div>
            <h2>{this.state.title}</h2>
            <form onSubmit={this.handleFromSubmit}>
                <label htmlFor="name">Name</label> 
                <input id="name" type="text" onChange={this.handleInputNameChanging}/> 
                
                <br/>


                <label >性别:</label>
                <input type="radio" value='1' checked={this.state.gender==='1'} 
                    onChange={this.handleInputGenderChanging} />男
                <input type="radio" value='2' checked={this.state.gender==='2'} 
                    onChange={this.handleInputGenderChanging} />女
                <br/>


                <label >所在城市:</label>
                <select onChange={this.handleSelectCityChanging}>
                    {
                        this.state.cities.map(function(value, key) {
                            return <option key={key}>{value}</option>
                        })
                    }
                </select>

                <br/><br/>

                爱好: <br/>
                {/* 注意 :在此使用的箭头函数(value, key) =>> {}形式 */}
                {/* Hey1：若在此使用的普通匿名函数function(value, key) {console.log(this)} 形式; */}
                {/*          其中this为应为window对象, 但是测试语句 console.log(this)输出为undefine */}
                {/*       总之, this并非为我们希望指向的当前组件对象                             */}
                {/* 问题: 如何解释Hey1中, 普通匿名函数function(value, key) {console.log(this)}中 */}
                {/*       this应该是理论上的window对象 还是 undefine ?????????????????????????   */}
                
                {                    
                    // this.state.hobby.map(function(value, key) {
                    //     console.log(this); 
                    //     //普通匿名函数时这里的this是理论上就为window对象, 测试语句console.log(this)输出
                    //  //为undefine (反正不是所希望的组件对象); 而箭头函数时this是当前组件对象;
                    //     return <span key={key}>
                    //         <input type="checkbox" checked={value.checked} 
                    //             onChange={this.handleCheckboxHobbyChanging.bind(this,key)} /> {value.title}
                    //     </span>
                    // })
                }
                

                {/* Hey2: 使用箭头函数(value, key) => {console.log(this)} 形式, 其中this为当前组件对象;  */}
                {/* Hey3: 使用this.handleCheckboxHobbyChanging.bind(this,key)只是为了将key作为参数传递;  */}
                {/*       在bind(this. key)中, 即使不传递this, 只要在实例方法handleCheckboxHobbyChanging */}
                {/*       定义时使用 handleCheckboxHobbyChanging = () => {} 箭头函数方式, 箭头函数的方法 */}
                {/*       体内的this仍指向当前组件; 若实例方法handleCheckboxHobbyChanging 定义时使用普通 */}
                {/*       方式 handleCheckboxHobbyChanging() {}, 由于触发调用前使用了bind(this, key)绑定 */}
                {/*       实例方法 handleCheckboxHobbyChanging的运行环境, 其中的this指向当前对象         */}
                {/* Hey4: 换个角度从handleCheckboxHobbyChanging.bind(this, key)来看, onChange事件指向的  */}
                {/*       方法handleCheckboxHobbyChanging 进行bind(this. key)绑定, 确保了this指向当前对  */}
                {/*       那么实例方法handleCheckboxHobbyChanging的定义就无所谓使用普通函数还是箭头函数  */}
                                
                {                    
                    this.state.hobby.map((value, key) => {
                        //console.log(this); //箭头函数时this是当前组件对象
                        //console.log(key);
                        return <span key={key}>
                            <input type="checkbox" checked={value.checked} 
                                onChange={this.handleCheckboxHobbyChanging.bind(this,key)} /> {value.title}
                        </span>
                    })
                }
                
                

                <br/>
                说明:<br/>
                <textarea value={this.state.info} onChange={this.handleTextareaInfoChanging} />

                <br/>
                <br/>
                <input type="submit" value="提交"/>
            </form>
        </div>
    };
};

export default ReactForm;