React 事件对象键盘事件 表单事件 ref取dom节点 实现简单得数据双向绑定

事件对象

	```事件对象：在触发DOM上发生某个时间时，会产生一个事件对象event .这个对象包含着所有与事件有关得信息。```

import React from 'react';

import '../assets/css/index.css';


class Home extends React.Component{

   // 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象

   constructor(props){
       super(props);   //固定写法

       this.state={

           msg:'我是一个home组件',
           username:''
       }   

       
   }

   run=(event)=>{
   // 箭头函数写法可以获取state里的数据
   //event 事件对象包含着这个事件得所有信息 还可以通过event.target 获取dom节点
   // 可以通过事件对象获取 dom 得属性信息 在小程序里经常用到

       // alert(this.state.msg);


       // console.log(event);

       // alert(event.target);   /*获取执行事件的dom节点*/

       event.target.style.background='red';


       //获取dom的属性 
       alert(event.target.getAttribute('aid'))
       // 输出123



   }

   inputChange=(e)=>{

       // console.log('111');

       //2获取表单的值 这里获取输入框得值
       console.log(e.target.value);

  //3 在这里设置输入框得值
       this.setState({

           username:e.target.value
       })


   }

   getInput=()=>{
    // 4 点击按钮获取输入框得值

       alert(this.state.username);
   }

   render(){
       return(
           <div>              
              
              {this.state.msg}

              {/* 事件对象 */}

              <h2>事件对象演示</h2>

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

              <br /><br /> <hr />


               <h2>表单事件</h2>


               {/* 获取表单的值

               1、监听表单的改变事件                        onChange
               2、在改变的事件里面获取表单输入的值           事件对象
               3、把表单输入的值赋值给username              this.setState({})
               4、点击按钮的时候获取 state里面的username     this.state.username
                */}
                // 获取input得值 监听事件onchange 当输入框得值改变 通过事件对象获取
               <input onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>
                <br /><br /> <hr />
           </div>
       )

   }    
}
export default Home;

第二种获取输入框得值、键盘事件 ref 获取dom 节点

import React from 'react';

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 

            username:''
         };
    }
    inputChange=()=>{

        /*
            获取dom节点

                1、给元素定义ref属性
                    <input ref="username" />

                2、通过this.refs.username 获取dom节点

        
        */
            // 2通过dom节点取值 和原生一样
        let val=this.refs.username.value;
       //3 通过this.setState改变 userName 得值
        this.setState({
            username:val
        })

    }
    // 4得到输入框的值
    getInput=()=>{

        alert(this.state.username);
    }

    //键盘事件
    inputKeyUp=(e)=>{
       // 可以得到每个键盘的键值
       
        console.log(e.keyCode);


        if(e.keyCode==13){
          当按enter键盘时取值
            alert(e.target.value);
        }

    }
    inputonKeyDown=(e)=>{

        console.log(e.keyCode);

        if(e.keyCode==13){

            alert(e.target.value);
        }
    }
    render() {
        return (
            <div>
                

                  {/* 获取表单的值

                1、监听表单的改变事件                        onChange
                2、在改变的事件里面获取表单输入的值            ref获取 
                3、把表单输入的值赋值给username              this.setState({})
                4、点击按钮的时候获取 state里面的username     this.state.username
                 */}

                <input ref="username" onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>



                <br /><br /> <hr />
                

                <h2>键盘事件</h2>
                   //当键盘抬起触发的事件通过事件对象监听
                <input onKeyUp={this.inputKeyUp}/>
                <br /><br />

                <input onKeyDown={this.inputonKeyDown}/>

            </div>
        );
    }
}

export default List

3 实现数据的双向绑定

import React,{Component} from 'react';


class Todolist extends Component {
    constructor(props) {
        super(props);
        this.state = { 

            username:"111"
        };
    }
    inputChange=(e)=>{
    //2 获取输入框值改变 给默认值
        this.setState({

            username:e.target.value
        })

    }
    //  3点击按钮改变初始值
    setUsername=()=>{
        this.setState({

            username:'李四'
        })

    }
    render() {
        return (
            <div>

                <h2>双休数据绑定</h2>


                {/* model改变影响View    view改变反过来影响model  */}
                     // 1通过value 获取默认值 
                <input  value={this.state.username} onChange={this.inputChange}/> 

               <p> {this.state.username}</p>
               
               <button onClick={this.setUsername}>改变username的值</button>


            </div>
        );
    }
}

export default Todolist;