React 表单text、select、checkbox、radio学习

import React from 'react';

class FormStudy extends React.Component {
    constructor (props) {
        super(props);
        // 创建引用对象
        this.ageRef = React.createRef();
        this.state = {
            username: 'naoteng',
            age: 18,
            sex: '',
            hobbiesArr: [],
            professional: ''
        };
    }

    // 改变用户的表单信息
    inputChangeAction (typeStr, eventObj) {
        var value = eventObj.target.value;
        if (typeStr == 'hobbiesArr') {
            var hobbiesWidgets = document.getElementsByName('hobbies');
            var tempArr = [];
            for (var i = 0; i < hobbiesWidgets.length; i++) {
                var hobbyWidget = hobbiesWidgets[i];
                debugger
                if (hobbyWidget.checked) {
                    tempArr.push(hobbyWidget.value);
                }
            }
            this.setState({
                hobbiesArr: tempArr,
            })
        } else {
            this.setState({
                [typeStr]: value
            })
        }
    }

    // 每个表单添加一个 if 语句，会导致 “if else”爆炸
    // inputChangeAction (typeStr, eventObj) {
    //     var value = eventObj.target.value;
    //     debugger
    //     if ('username' == typeStr) {
    //         debugger
    //         this.setState({
    //             username: value
    //         })
    //     } else if ('age' == typeStr) {
    //         debugger
    //         this.setState({
    //             age: value
    //         })
    //     }
    // }
    
    // 每个 input 表单添加一个 方法，会导致 方法“爆炸”
    // ageChangeAction (eventObj) {
    //     var value = eventObj.target.value;
    //     debugger
    //     this.setState({
    //         age: value
    //     })
    //     debugger
    // }

    // 定义了一个方法
    usernameRefAction = () => {
        console.log(this.refs.usernameRef)
        var usernameId = document.getElementById('usernameId');
        var usernameRef = this.refs.usernameRef;
        console.log(usernameId == usernameRef);
        usernameRef.value = 'yiming';
        debugger
    }

    // 定义了一个方法
    ageRefAction = () => {
        console.log(this.ageRef)
        this.ageRef.current.value = 28;
        debugger
        // debugger
    }

    render () {
        let {username, age, sex, hobbiesArr, professional} = this.state;
        return (
            <div>
                <div>
                    <span>姓名 :</span>
                    <span>
                        {/* 
                        1. 如果定义的方法没有传递任何参数，第一个参数就是event对象 
                        2. 如果传递了参数，则最后一个参数就是event对象
                        3. 设置默认值使用的是 defaultValue 属性
                        4. 设置 defaultVlaue 不会影响用户的输入的值
                        5. 如果设置了value的值，则一定要和 onChange 配合使用
                        */}
                        {/*  */}
                        
                        {/* 使用 ref 属性来引用对应的组件， this.refs.usernameRef(自定义ref名)  */}
                        <input type='text' id='usernameId' ref='usernameRef' onChange={this.inputChangeAction.bind(this,'username')} value={username} />
                    </span>
                    <span>{username}</span>
                    <span>
                        <button onClick={this.usernameRefAction}>测试usernameRef</button>
                    </span>
                </div>
                <div>
                    <span>年龄 :</span>
                    <span>
                        <input type='text' ref={this.ageRef} onChange={this.inputChangeAction.bind(this,'age')} value={age} />
                    </span>
                    <span>{age}</span>
                    <span>
                        <button onClick={this.ageRefAction}>测试 ageRefAction</button>
                    </span>
                </div>
                <div>
                    <span>性别 :</span>
                    <span>
                        {/* 
                        1. radio 设置默认值是 defaultChecked 
                        2. value 设置的值是固定的字符串，使用onChange事件来修改radio表单的值
                        */}
                        <input type='radio' name='sex' value='girl' defaultChecked onChange={this.inputChangeAction.bind(this,'sex')} /> 女
                        <input type='radio' name='sex' value='boy' onChange={this.inputChangeAction.bind(this,'sex')} /> 男
                    </span>
                    <span>{sex}</span>
                </div>
                <div>
                    <span>爱好 :</span>
                    <span>
                        {/* 
                        1. checkbox 设置默认值是 defaultChecked 
                        2. value 设置的值是固定的字符串，使用onChange事件来修改 checkbox 表单的值
                        */}
                        <input type='checkbox' name='hobbies' value='basketball' onChange={this.inputChangeAction.bind(this,'hobbiesArr')} /> 篮球
                        <input type='checkbox' name='hobbies' value='pingpang' onChange={this.inputChangeAction.bind(this,'hobbiesArr')} /> 乒乓球
                        <input type='checkbox' name='hobbies' value='football' onChange={this.inputChangeAction.bind(this,'hobbiesArr')} /> 足球
                    </span>
                    <span>{hobbiesArr}</span>
                </div>
                <div>
                    <span>专业 :</span>
                    <span>
                        {/* 
                        */}
                        <select name='professional' onChange={this.inputChangeAction.bind(this,'professional')}>
                            <option value='WEB'>WEB</option>
                            <option value='JAVA'>JAVA</option>
                            <option value='PHP'>PHP</option>
                            <option value='UI'>UI</option>
                        </select>
                    </span>
                    <span>{professional}</span>
                </div>
            </div>
        )
    }
}
/**
 * input textarea select checkbox radio
 */
export default FormStudy;