React（脚手架）——create-react-app撸api（三）

还是再讲一下this的问题，es6方法它的this是默认没有绑定的，因此run方法可以执行但是getState方法执行报错，因此还是要有这个习惯，bind（this）

这样其实原型上还是es5的概念，个人比较喜欢前面的写法，传参的使用bind（this，‘参数’，‘参数’）

这个之前都写过，回顾一下

来看看什么是事件对象

    import React,{Component} from 'react'
    import '../assets/css/Home.css'
    class Home extends Component{
        constructor(){
            super()
            this.state={
                msg:'我是Home组件'
            }
        }
        

        render(){
            return(
            <div>
                    {this.state.msg}
                    {/*事件对象*/}
                    <hr/>
                    <button>事件对象</button>
            </div>
            )
        }
    }

    export default Home

之前我也写到过，但是没细讲

在触发DOM上的某个事件时，会产生事件对象（event），这个对象包含着所有与事件有关的信息

event.target获取事件的DOM节点，这个是比较常用的，获取到节点就可以做些事了

比如改变它的文字颜色

    import React,{Component} from 'react'
    import '../assets/css/Home.css'
    class Home extends Component{
        constructor(){
            super()
            this.state={
                msg:'我是Home组件',
                inputValue:''
            }
        }
        
        run(event){
            console.log(event.target)
            event.target.style.color='red'
        }

        change(event){
            this.setState({inputValue:event.target.value})
        }
        
        value(){
            console.log(this.state.inputValue)
        }
        render(){
            return(
            <div>
                    {this.state.msg}
                    {/*事件对象*/}
                    <hr/>
                    <button onClick={this.run.bind(this)}>事件对象</button>
                    
                    <hr/>
                    <input defaultValue={this.state.inputValue} onChange={this.change.bind(this)}/>
                    <br/>
                    <button onClick={this.value.bind(this)}>获取input的值</button>
            </div>
            )
        }
    }

    export default Home

也过一遍表单的方法，看过基础的肯定觉得很简单，先设置state默认值，根据input的onChange改变state的默认值，然后通过button获取这个state

推荐安装一个插件

这里的话有许多命令，快速搭建布局，这里只需要打个cccs，就快速搭建了

    import React,{Component} from 'react'
    class New extends Component {
        constructor(props) {
            super(props);
            this.state = {  };
        }
        inputKey(event){
        console.log(event.keyCode)
        }
        render() {
            return (
            <div>
                <h2>键盘事件</h2>
                <input onKeyUp={this.inputKey.bind(this)} />
            </div>
            );
        }
    }

    export default New;

键盘事件onKey**
比如我们做登录的时候，判断回车 keycode==13 很方便哈

最后写个简易双向数据绑定

    import React,{Component} from 'react'
    class New extends Component {
        constructor(props) {
            super(props);
            this.state = {  value:''};
        }

        inputChange(e){
          this.setState({
              value:e.target.value
          })
        }
        
        render() {
            return (
            <div> 
                 {/*双向数据绑定  model改变影响view  view改变反过来影响model*/}
                 <input defaultValue={this.state.value}  onChange={this.inputChange.bind(this)}/>
                 <p>{this.state.value}</p>
            </div>
            );
        }
    }

    export default New;