React 表单text、select、checkbox、radio、ref

import  React,{Component} from 'react'

class FormDemo01 extends Component {
    constructor (props) {
        super (props)
        // ref  先创建一个引用对象,新版本官方推荐这种ref的使用方法，
        //在DOM不存在的情况下不会报错
        // ref  react提供的一种可以找到DOM节点，病对其进行操作的方法
        this.ageRef=React.createRef()
        this.state={
            username:'张三',
            age:18,
            sex:"boy",
            // 爱好，checkbox初始化为数组
            hobbies:[],
            // 专业
            professeonal:'web'
        }
        // 如果要传参时,可用在render中的html里面改变this指向额方法
        // this.inputChangeAction=this.inputChangeAction.bind(this)
    }
    render () {
        let {username,age,sex,hobbies,professeonal}=this.state
        
        return (
            <div>
                <div>
                    姓名： 
                    {/* input 输入框必须要有onChange 方法 
                        这里的onChange 方法 后面传入相关的参数,
                        方法中接收参数,然后可根据传入的参数自动更改对应的state数据
                    */}
                    <input type="text" value={username} 
                        onChange={this.inputChangeAction.bind(this,'username')}
                    />
                </div>
                <div>
                    年龄： 
                    {/* input 输入框必须要有onChange 方法 
                        这里还加入了ref={this.ageRef}，
                        方便后面的方法ageRefAction直接找到这个DOM节点
                    */}
                    <input type="text" value={age} ref={this.ageRef}
                        onChange={this.inputChangeAction.bind(this,'age')}
                    />
                    <button onClick={this.ageRefAction}>测试age的ref</button>
                </div>
                <div>
                    性别： 
                    {/* input  radio 单选必须要有onChange 方法 
                        defaultChecked 默认选中
                        value 里面写的是固定的值
                    */}
                    <input type="radio"  name="sex" value="boy" defaultChecked
                        onChange={this.inputChangeAction.bind(this,'sex')}
                    />  男
                    
                    {/* input  radio 单选必须要有onChange 方法 */}
                    <input type="radio"  name="sex" value="girl"
                        onChange={this.inputChangeAction.bind(this,'sex')}
                    />  女
                </div>
                <div>
                    爱好： 
                    {/* input 输入框必须要有onChange 方法 */}
                    <input type="checkbox" name="hobbies" value="footBall" 
                        onChange={this.inputChangeAction.bind(this,'hobbies')}
                    />  足球
                    {/* input 输入框必须要有onChange 方法 */}
                    <input type="checkbox" name="hobbies" value="barsketBall"
                        onChange={this.inputChangeAction.bind(this,'hobbies')}
                    />  篮球
                    {/* input 输入框必须要有onChange 方法 */}
                    <input type="checkbox" name="hobbies" value="Pingpag"
                        onChange={this.inputChangeAction.bind(this,'hobbies')}
                    />  乒乓
                </div>
                <div>
                    专业：
                    <select 
                        // 此处name的有无，但是要提交必须有name，不影响state值的改变
                        name="professeonal"
                        defaultValue="web"
                        onChange={this.inputChangeAction.bind(this,'professeonal')}
                    >
                        <option value="web">web</option>
                        <option value="java">java</option>
                        <option value="vue">vue</option>
                    </select>
                </div>
                
            </div>
        )
    }

    // 定义inuput输入框的inputChangeAction方法
    inputChangeAction (typeStr,event) {
        // event 为事件代理对象，这里拿到的是输入框的值
        let value=event.target.value
        // 事件中，没有传参时，默认第一个参数是event，传参时，最后一个参数是event
        // debugger
        // event.target.value 是输入框输入的值
        // 定义参数typeStr，接收传入过来的变量值，可动态自动判断用户改变的是哪个元素，
        //从而改变对应的state属性

        // 注意，如果传入进来的参数是一个数组，比如爱好hobbies，则这里需要做判断
        // 我这里是定义了一个变量typeStr接收传递过来的参数，
        //然后以变量的形式[typeStr],(外面加了[])放在setState中
        if (typeStr==='hobbies') {
            // 数组hobbiesArr为复选框选中的值
            let hobbiesArr=[]
            let hobbiesDom=document.getElementsByName('hobbies')
            for (var i=0 ;i<hobbiesDom.length ;i++){
                if (hobbiesDom[i].checked){
                    hobbiesArr.push(hobbiesDom[i].value)
                }
            }
            console.log(hobbiesArr)
            this.setState({
                hobbies:hobbiesArr
            })
            // debugger
        }else {
            this.setState({
                // 此处用中括号，里面写的是变量，，不然，json对象会默认解析为字符串
                [typeStr]:value          
            })
            // debugger
        }
    }

    // 定义一个改变age  ref的方法，可以直接改变节点age输入框里面的值，
    //但是不会改变state里的数据
    ageRefAction=()=>{
        console.log(this.ageRef)
        this.ageRef.current.value=22
        // debugger
    }
}

export default FormDemo01

0916