[OHIF-Viewers]醫療數字閱片-醫學影像-REACT向事件處理程式傳遞引數-.bind-傳遞函式給元件

在 Render 中的繫結

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
  }
}

注意：

在 render 方法中使用Function.prototype.bind

會在每次元件渲染時建立一個新的函式，可能會影響效能（參見下文）。

在 Render 中使用箭頭函式

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={() => this.handleClick()}>Click Me</button>;
  }
}

注意：

在 render 方法中使用箭頭函式也會在每次元件渲染時建立一個新的函式，這會破壞基於恆等比較的效能優化。

可以在 render 方法中使用箭頭函式嗎？

一般來說是可以的，並且使用箭頭函式是向回撥函式傳遞引數的最簡單的辦法。

但是如果遇到了效能問題，一定要進行優化！

向事件處理程式傳遞引數

在迴圈中，通常我們會為事件處理函式傳遞額外的引數。例如，若id是你要刪除那一行的 ID，以下兩種方式都可以向事件處理函式傳遞引數：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述兩種方式是等價的，分別通過箭頭函式和Function.prototype.bind來實現。

在這兩種情況下，React 的事件物件e會被作為第二個引數傳遞。如果通過箭頭函式的方式，事件物件必須顯式的進行傳遞，而通過bind的方式，事件物件以及更多的引數將會被隱式的進行傳遞。