昨天立的flag排嫌，今天搞起來
事件處理
在React中事件處理和一般的DOM的事件處理特別相似契讲，但是也是有一些語法上面的不同
- React中是用的駝峰命名仿吞，在DOM中則是小寫命名
- 在JSX中你是傳遞一個(gè)函數(shù)，在DOM則是傳遞的一個(gè)字符串
??:
在HTML中
<button onclick="activateLasers()">
Activate Lasers
</button>
在React中
<button onClick={activateLasers}>
Activate Lasers
</button>
還有一個(gè)不同的地方是捡偏，您能夠使用return false 來阻止系統(tǒng)默認(rèn)事件唤冈。必須調(diào)用preventDefault函數(shù)。再來一個(gè)??银伟，在點(diǎn)擊a標(biāo)簽的時(shí)候阻止默認(rèn)跳轉(zhuǎn)新頁面的事件
在HTML中：
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
在React中：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
在使用React的時(shí)候不需要立刻就添加監(jiān)聽（addEventListener）你虹，而是在元素被渲染到界面的時(shí)候添加監(jiān)聽
在使用ES6定義一個(gè)類類型的組件的時(shí)候，通常的形式是事件處理將會(huì)成為這個(gè)類的一個(gè)方法彤避。
Toggle組件渲染了一個(gè)button傅物，這個(gè)button的標(biāo)題在on和off之間切換
??：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
這里要注意的有兩個(gè)地方，分別來分析一下琉预。
第一個(gè)
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
這里的prevState就是this.state,setState傳了一個(gè)函數(shù)進(jìn)入董饰，返回值是把當(dāng)前狀態(tài)取反。最后設(shè)置到相應(yīng)的字段上面去圆米。
第二個(gè)
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
類的構(gòu)造方法里面出現(xiàn)了卒暂，之前沒見過的東西
this.handleClick = this.handleClick.bind(this);
這句話就是給綁定的事件添加監(jiān)聽，把this傳遞進(jìn)去才能在handleClick函數(shù)中使用this榨咐。
一定要注意this在JSX回調(diào)中的含義介却，在Javascript中類方法不會(huì)默認(rèn)綁定。如果忘記將this.handleClick綁定并且傳遞到了onClick块茁，this將會(huì)是undefined當(dāng)函數(shù)被調(diào)用的時(shí)候齿坷。
這不是React特有的屬性，這屬于js的方法調(diào)用準(zhǔn)則数焊。大體上來說永淌，如果引用了一個(gè)方法，這個(gè)方法后面沒有帶()佩耳，例如 onClick={this.handleClick}遂蛀，那么你就要把這個(gè)方法進(jìn)行綁定。
如果你覺得這個(gè)綁定很煩人干厚，很繁瑣李滴，有一些方法可以解決這個(gè)問題。
第一種
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick.
// Warning: this is *experimental* syntax.
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
這種方法在React App中是默認(rèn)開啟的蛮瞄，這里有一個(gè)警告Warning: this is experimental syntax.不懂啥意思所坯。。挂捅。應(yīng)該是不建議這么用吧芹助。
還有一種方法，也有問題存在，可以忽略看此步驟
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// This syntax ensures `this` is bound within handleClick
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
這里的問題是每次當(dāng)組件被渲染的時(shí)候后就會(huì)重新創(chuàng)建一個(gè)回調(diào)函數(shù)状土。在大多數(shù)的情況下是沒有問題的无蜂，但是如果這里的回調(diào)作為一個(gè)props的參數(shù)向下傳遞到內(nèi)部組件中的時(shí)候，可能會(huì)造成額外的渲染蒙谓。
最后還是建議使用最開始講的那種方式斥季，雖然有些繁瑣，但是作為初學(xué)者累驮，最不容易踩到坑里泻肯。
傳遞參數(shù)
在一個(gè)循環(huán)的內(nèi)部，我們通常會(huì)傳遞額外的參數(shù)到事件處理中慰照。例如灶挟，??
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
上面兩種方法都是OK的，一種使用的是箭頭函數(shù)毒租，一種使用的是函數(shù)屬性綁定稚铣。
在箭頭函數(shù)中e表示React的事件，如果是箭頭函數(shù)中墅垮，我們必須明確的傳遞這個(gè)參數(shù)惕医，但是bind的方法是默認(rèn)自己傳遞這個(gè)參數(shù)的。
