React.js 向組件傳遞函數：綁定與非綁定

Question

 class App extends React.Component { constructor() { super(); this.name = "Bob"; this.handleClickTwo = this.handleClickOne.bind(this); } handleClickOne() { alert(this.name); } handleClickThree = () => alert(this.name); render() { return ( <div> <button onClick={ this.handleClickOne }> Click One </button> <button onClick={ this.handleClickTwo }> Click Two </button> <button onClick={ this.handleClickThree }> Click Three </button> </div> ) } } ReactDOM.render(<App />, document.getElementById('app'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>

我正在嘗試更多地了解 React.js，並且我想測試一些東西。 使用 label 單擊按鈕“單擊二”和“單擊三”按預期工作，這意味着它會顯示名稱“Bob”的警報。

但是當我單擊標有“單擊一個”的按鈕時，它給了我一個錯誤，說“名稱”是一個未定義的屬性。

我是否誤解了 React.js 或 JS？ handleClickOne() 中的“this”是指 function 本身，而不是構造函數中的內容嗎？ 如果是這樣，為什么handeClickTwo 有效？

Answer 1

javascript 中默認不綁定函數。 你沒有綁定handleClickOne ，所以你不能調用this.handleClickOne

使用this.handleClickTwo = this.handleClickOne.bind(this)將handleClickTwo綁定在構造函數中的代碼中。

handleClickThree使用 [public class 字段語法][1]，正確綁定回調，所以它也能正常工作。