React 学习之 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

（一） 表单事件

　　获取表单的值分四步

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

　　 注： 一定要注意this的绑定  建议采用箭头函数

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节点
        
        */
        let val=this.refs.username.value;

        this.setState({
            username:val
        })

    }
    
    getInput=()=>{
        alert(this.state.username);
    }

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

            </div>
        );
    }
}

export default List;

 

---

 

(二) 键盘事件

import React from 'react';

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

            username:''
         };
    }

    //键盘事件
    //keyCode  是js键盘按钮编号
    
    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode==13){
            alert(e.target.value);
        }
    }
 
    inputonKeyDown=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode==13){
            alert(e.target.value);
        }
    }

    render() {
        return (
            <div>
                <h2>键盘事件</h2>
                {/** onKeyUp 是按Enter 抬上来的时候触发
                     onKeyDown 是按Enter 按下去的触发
                */}

                <input onKeyUp={this.inputKeyUp}/>

                <br /><br />

                <input onKeyDown={this.inputonKeyDown}/>
            </div>
        );
    }
}
export default List;

 

---

 

(三) React实现类似Vue的双向数据绑定

1. 手动监听文本框的onChange事件
2. 在onChange事件中拿到最新的值
3. 调用this.setState 把最新的值同步到state中，state发生改变，页面重新进行渲染 实现了数据的双向绑定

import React,{Component} from 'react';

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

            username:"111"
        };
    }
    inputChange=(e)=>{
        this.setState({

            username:e.target.value
　　　　　　　// username : this.refs.txt.value   或者可以通过 refs 这样获取文本框中的值
        })

    }
    setUsername=()=>{
        this.setState({

            username:'李四'
        })

    }
    render() {
        return (
            <div>
                <h2>双向数据绑定</h2>
                {/* model改变影响View    view改变反过来影响model  */}

　　　　　　　　　 //<input value = {this.state.username} onChange={this.inputChange} ref="txt">    或者可以这样通过ref拿到 txt value中的值
                <input  value={this.state.username} onChange={(e) => this.inputChange(e)}/>   {/*view 改变 影响model */}

               <p> {this.state.username}</p>
               
               <button onClick={this.setUsername}>改变username的值</button>          {/*model 改变影响view  React自带 */}

            </div>
        );
    }
}

export default Todolist;

 

 

---

 

 

 

　　　　天亮以前说再见