react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event

通过事件的event对象获取它的dom元素

run=(event)=>{
        event.target.style="background:yellowgreen" //event的父级为他本身
        event.target.getAttribute("aid")            //这样便获取到了它的自定义属性aid
    }
    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <br/>
                <button aid='123' onClick={this.run}>事件对象</button>
            </div>
        )
    }

2、表单事件、获取input的值

第一种方式OnChange

    constructor(props) {
        super(props)
        this.state = {
           msg:'我是一个home组件'
        }
    }
    inputChange=(event)=>{
        this.setState({
            msg:event.target.value     //通过事件对象的value获取值
        })
    }
    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <br/>
                <input type="text" name="" onChange={this.inputChange}></input>
            </div>
        )
    }

第二种方式 ref //ref在vue中也有 不过写法不同

    inputChange = () => {
        let val = this.refs.username.value
        this.setState({
            msg:val
        })
    }
    render() {
        return (

            <div>
                 <h2>{this.state.msg}</h2>
                <input ref="username" type="text"  name="" onChange={this.inputChange}></input>
            </div>

        );
    }

3、键盘事件

    inputKeyUp = (e) => {
        if(e.keyCode === 13){
            this.setState({
               msg: e.target.value
            })
        }
    }
    render() {
        return (
          <div>
            <h2>{this.state.msg}</h2>
            <input ref="username" type="text"  name="" onKeyUp={this.inputKeyUp}</input>
            </div> //另有keyDowm等等
        );
    }

4、实现双向数据绑定

通过change事件实现数据改变影响视图  视图改变影响数据即可 //module改变会自动影响视图

 constructor(props) {
        super(props)
        this.state = {
            msg: null
        }
    }
    inputChange = (e) => {
        this.setState({
            msg:e.target.value
        })
    }
    render() {
        return (
            <div>
                 <h2>{this.state.msg}</h2>
                <input  type="text"  name="" onChange={this.inputChange} value={this.state.msg}></input>
            </div>
        );
    }