React-事件的函式繫結
阿新 • • 發佈:2018-12-17
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>