PJCHENder 未整理筆記

[ReactDoc] 處理事件 Handling Events

2018-09-03

[ReactDoc] 處理事件 Handling Events

@(React)[react docs, React]

重要觀念

Event Pooling and Synthetic Event

:exclamation: 記得把在 event 中使用到的變數先存起來,才能避免 synthetic event 的錯誤訊息(如下):

This synthetic event is reused for performance reasons. If you’re seeing this, you’re accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See react-event-pooling for more information.

解決方式除了使用 event.persist() 之外,也可把該 event 先存成一個變數,例如:

1
2
3
4
const handleClick = (e) => {
const target = e.target; // 先把 e.target 存成一個變數
console.log(target);
};

Event Pooling @ React Docs

Code Snippets

this 的綁定

function component:無法綁定 this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Stateless Functional Component
function ActionLink() {
// STEP 2: 定義 event handler
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}

return (
// STEP 1: 監聽事件
<a href="#" onClick={handleClick}>
Click me
</a>
);
}

:exclamation: **stateless function component 中的 this 會指稱到 Window**

Class component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = { isToggleOn: true };

// STEP 3: 綁定 event handler 的 this
this.handleClick = this.handleClick.bind(this);
}

// STEP 2: 定義 event handler
handleClick(e) {
this.setState((prevState) => ({
isToggleOn: !prevState.isToggleOn,
}));
}

render() {
return (
// STEP 1: 監聽事件
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}

ReactDOM.render(<Toggle />, document.getElementById('root'));

Class component with Public Class Fields syntax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class LoggingButton extends React.Component {
// 如果有支援 public class fields 這種語法(實驗性)
// 可以透過這樣綁定 this
handleClick = (e) => {
console.log('this is:', this);
}

render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}

在事件中代入其他參數(parameters)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Toggle extends React.Component {
constructor(props) {
super(props);

this.handleClick = this.handleClick.bind(this);
}

handleClick(id, e) {
// Do something here ...
}
}

<button onClick={(e) => this.handleClick(id, e)}>Delete Row</button>
<button onClick={this.handleClick.bind(this, id)}>Delete Row</button>
  • 使用的是箭頭函數,則代入參數的順序可以自己決定。
  • 使用的是 bind,則 event handler 的最後一個參數一定會是 event
  • 這兩種方法都不是最好的寫法,因為都會在該元件轉譯時,重複產生同樣內容的 function。
最好的寫法可以是這樣
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Toggle extends React.Component {
constructor(props) {
super(props);

this.handleClick = this.handleClick.bind(this);
}

// 可以簡寫成 handleClick = params => e => {...}
// !!下面這種寫法若沒有使用 arrow function 則 this 會變成 undefined
handleClick(params) {
return (e) => {
// Do something here ...
};
} // /handleClick
}

<button onClick={this.handleClick('params')}>Delete Row</button>;

ReactJS - Parameterized Event Handlers @ Medium

參考

Tags: React

掃描二維條碼,分享此文章