(四)React表单初步

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);
    }

    //键盘事件
    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>
                

                  {/* 获取表单的值

                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>
        );
    }
}