1. 程式人生 > >React-事件的函式繫結

React-事件的函式繫結

React-事件的函式繫結

1.React內的事件名,均使用駝峰式寫法:
(1). onClick
(2).onKeyDown
(3).onMouseOver

2.繫結函式的方法
(1).第一種(不常用)

class MyFirst extends React.Component {
				/*構造器*/
				constructor(props){
					super(props);//呼叫父類的建構函式   用於初始化props屬性
					this.state={
						name:'張三',
						age:18,
						msg:'MyFirst元件'
					}
					this.changeAge=this.changeAge.bind(this);// bind用於鎖定this指向,使該方法內的this始終指向本元件。
				};
				changeAge(){
					this.setState({
						age:19
					})
				};
				render(){
					return (
						<div>
							<h1>{this.state.msg}</h1>
							<p>{this.state.name}</p>
							<p>{this.state.age}</p>
							<p>{this.props.a}</p>
							<button onClick={this.changeAge}>click me change age</button>
						</div>
					)
				}
			}

類似控制代碼方式
(2)第二種:直接寫
將構造器中的this.changeAge去除,button標籤改成下述寫法

<button  onClick={this.changeAge.bind(this)}>click  me</button>

即可
(3)第三種:箭頭函式 (常用)

<button    onClick={()=>{this.changeAge();}}>click  me</button>