React学习系列六事件对象表单事件键盘事件

定义

事件对象：在触发dom上的某个事件时，会产生一个事件对象event，这个对象中包含所有与事件相关的信息

event.target 获取执行事件的dom节点

event.target.style.background='red' 改变颜色

// 获取dom的属性

event.target.getAttribute('aid')

<button aid="123" onClick={this.run}>事件对象</button>

获取表单值

1、监听表单的改变事件  onChange

2、在改变的事件里获取表单输入的值 通过事件对象获取值 e.target.value

3、把表单输入的值赋值给username this.setState({})

4、点击按钮的时候获取state里面的username  this.state.username

<input onChange={this.inputChange} onClick={this.getData} />

获取值的另一种方式 ref

1、给元素定义 ref 属性 ref="user"

2、通过 this.refs.user.value; 也可以获取到值

键盘事件

input 可以加 onKeyUp 方法 可以获取按下键

<input onKeyUp={this.inputKeyUp} />

inputKeyUp =(e) =>{

console.log(e.keyCode);

         if(e.keyCode == 13){

                    alert(e.target.value);

             }

}

双向绑定

像下面这样，比较简单就实现了

<input value={this.state.user} onChange={this.inputChange}/>

附学习代码：

import React from 'react'

class TestForm extends  React.Component{
    constructor(props){
        super(props);

        this.state = {
            username:"张三",
            sex:'2',
            selectCity:'',
            cities:["北京","上海","广州","深圳"],
            hobbies:[
                {
                    name:"aaa",
                    isChecked:false
                },
                {
                    name:"bbb",
                    isChecked:true
                },
                {
                    name:"ccc",
                    isChecked:true
                },
                {
                    name:"ddd",
                    isChecked:false
                }
            ]
        }
    }

    inputChange = (e) =>{
        this.setState(
            {
                username:e.target.value
            }
        )
    }

    radioChange =(e) =>{
        this.setState(
            {
                sex:e.target.value
            }
        )
    }

    selectChange = (e) =>{
        this.setState(
            {
                selectCity:e.target.value
            }
        )
        console.log(this.state.selectCity)

    }

    checkBoxChange = (key) => {
        let hobbies = this.state.hobbies;
        hobbies[key].isChecked= !hobbies[key].isChecked;
        this.setState({
            hobbies:hobbies
        });
        // alert(key);
        console.log(this.state.hobbies)
    }

    render(){
        return(
                <div>
                {this.state.username}
                <br/>
               普通文本框： <input type='text' value={this.state.username} onChange={this.inputChange}/>
                    <br/>
                      <input type='radio' name={'sex'} value={'1'} checked={this.state.sex === '1'} onChange={this.radioChange} />男
                      <input type='radio' name={'sex'} value={'2'} checked={this.state.sex === '2'} onChange={this.radioChange} />女
                    <br/>
                    <select onChange={this.selectChange}>
                        {
                            this.state.cities.map(
                                (value,key)=>{
                                    return  <option key={key} value={value}>{value}</option>
                                }
                            )
                        }
                    </select>
                    <br/>
                    {
                        this.state.hobbies.map(
                            (value,key)=>{
                                return (
                                    <span key={key}>
                                    {value.name}<input type={'checkbox'} onChange={this.checkBoxChange.bind(this,key)} checked={value.isChecked}/>
                                    </span>
                                )
                            }
                            // (item) => {
                            //     return {item.name}<input type={'checkbox'} checked={item.isChecked}/>
                            // }
                        )
                    }
                </div>
        )
    }
}
export default TestForm;