08《黑马程序员——react》绑定事件

事件绑定

在React中，有独立的事件绑定小驼峰规则 onClick onChange
绑定事件格式 onClick={function}

基本写法

<button onClick={function(){console.log('ok')}}>按钮</button>
<button onClick={this.show}>按钮</button>

推荐写法

render(){
        return <div>
            BindEvent组件 
            <button onClick={()=>{this.show('wome')}}>按钮</button>
        </div>
    }
    // show(){
    //  console.log('你好')
    // }
    show = (arg) =>{
        console.log(arg)
    }

修改state数据

在react中，为state中数据重新赋值，不要使用 this.state.xxx = xxx

推荐使用 this.setState({}) 修改状态值

注意：

• 该方式只会修改对应的属性值，不会覆盖其它属性
• this.setState方法的执行是异步的；在状态值被修改后使用需要执行回调函数

this.setState({
            msg: '我不是'
        },function(){})

数据绑定

如果是绑定文本框的value不添加onChange函数，文本框将是只读的，并报错
所以必须提供onChange函数或者直接添加readOnly属性

<input onChange={()=>this.show('1')} type="text" value = {this.state.msg}/>

show = (arg) =>{
    this.setState({
        msg: '我不是'
    })
    console.log('改变')
}

注意：

• 单向数据流：默认情况下，state状态改变，页面也会同时改变
• 双向数据流：在react中页面改变，state不会自动改变；需要通过监听onchange事件

在onchange事件中，有两种方式获取文本框的值：

• 传参取值xx.target.value

<input onChange={(e)=>this.show(e)} type="text" value = {this.state.msg}/>
show = (arg) =>{
    this.setState({
        msg: arg.target.value //立即改变
    })
}

• 使用ref获取DOM元素引用

<input onChange={(e)=>this.show(e)} type="text" value = {this.state.msg} ref="txt"/>
show = (arg) =>{
    this.setState({
        msg: this.refs.txt.value
    })
    console.log(this.refs.txt.value)    
}