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