React学习笔记（三）表单事件、键盘事件、双向数据绑定

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息。
console.log(event) 可以打印事件信息，
console.log(event.target)可以打印当前执行事件的这个DOM节点的信息。
获取了DOM节点信息后就可以对DOM进行操作，比如改变触发事件的按钮的背景色：
event.target.style.background='green';
点击按按钮触发事件后将按钮的背景色改为绿色。
也可以自定义属性，然后通过event对象获取，比如：
<button zdy="non" onClick={this.run}>事件对象</button>
自定义了属性zdy，可以通过event对象获取zdy的值：
event.target.getAttribute('zdy');

表单事件

在文本框中输入的数据，点击button获取：

第一种方法：event.target.value

①、监听input
②、获取输入的数据给this、state中的一个数据存储
③、button获取数据。

        return (
            <div>
                <input onChange={this.inputChange}/> <button zdy="non" onClick={this.run}>事件对象</button>
            </div>
        );
    } 

第二种方法: ref

跟第一种方法相似，只是添加了ref属性。 通过ref属性获取input的值，不用时刻监听input。

键盘事件

键盘事件跟js没有多少区别：

其他键盘事件都是一样的。

类似于vue的双向数据绑定

双向数据绑定就是model改变影响view，反过来view改变也影响model。

 constructor(props){
        super(props);
        this.state={
            msg:'1'
        }
    }
    inputChange=(e)=>{
        this.setState({
            msg:e.target.value
        })
    }
    
    render() {
        return (
            <div>
                <h2>双向数据绑定</h2>
                <input value={this.state.msg} onChange={this.inputChange}/>
                <p>{this.state.msg}</p>
            </div>
        );
    }