未捕獲ReferenceError：handleClick未定義 - 反應

Question

我會直接指向這一點。這是我在ReactJS應用程序中的組件：

class BooksList extends Component { 

    constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 

    } 

    handleClick() { 
    e.preventDefault(); 
    console.log("The link was clicked"); 
    } 

    render() { 
    return (
     <div> 
     <a className="btn btn-success" onClick={handleClick}> 
      Add to cart 
     </a> 
     </div> 
    ); 
    } 
} 

爲什麼當組件加載時出現以下錯誤？

Uncaught ReferenceError: handleClick is not defined 

編輯：

你的答案後，我改變了我的代碼如下：

handleClick(e) { 
    e.preventDefault(); 
    console.log("Item added to the cart"); 
    } 


    renderBooks(){ 
     return this.props.myBooks.data.map(function(book){ 
      return (
        <div className="row"> 
        <table className="table-responsive"> 
         <tbody> 
         <tr> 
          <td> 
          <p className="bookTitle">{book.title}</p> 
          </td> 
         </tr> 
         <tr> 
          <td>         
          <button value={book._id} onClick={this.handleClick}>Add to cart</button> 
          </td> 
         </tr> 
         </tbody> 
        </table> 
        </div> 
     ); 
     }); 
    } 
    } 

render() { 
    return (
     <div> 
     <div> 
      <h3>Buy our books</h3> 
       {this.renderBooks()} 
     </div> 
     </div> 
    ); 
    } 

正如你可以看到我有.map它通過圖書列表進行迭代。 對於每本書，我都有一個按鈕，如果點擊它，會將特定書籍添加到用戶的購物車中。

如果我按照@Tharaka Wijebandara答案我可以做一個按鈕，在外面工作.map但在這種情況下，我仍然得到錯誤：

Uncaught (in promise) TypeError: Cannot read property 'handleClick' of undefined 
    at http://localhost:8080/bundle.js:41331:89 
    at Array.map (native) 

Answer 1

爲您解決問題提到在編輯部分。

原因是，你正在失去的context在map回調函數，你需要bind這個（類背景）與回調函數或使用arrow function，這將解決您的問題。

通過使用arrow function：

renderBooks(){ 
     return this.props.myBooks.data.map((book) => { //here 
      return (
        ..... 
     ); 
     }); 
    } 

或者使用.bind(this)有回調函數，就像這樣：

renderBooks(){ 
     return this.props.myBooks.data.map(function (book) { 
      return (
        ..... 
     ); 
     }.bind(this)); //here 
} 

Answer 2

使用this.handleClick

<a className="btn btn-success" onClick={this.handleClick}> 
    Add to cart 
</a> 

，你已經忘了在您的​​方法中添加e作爲參數。

handleClick(e) { 
    e.preventDefault(); 
    console.log("The link was clicked"); 
} 

Answer 3

添加到@Tharaka Wijebandara回答，您還可以聲明功能const，如下：

render() { 
    const handleClick = this.handleClick; 
    return (
     <div> 
      <a className="btn btn-success" onClick={handleClick}> 
        Add to cart 
      </a> 
     </div> 
    ); 
} 

其中​​被定義爲：

handleClick(e) { 
    e.preventDefault(); 
    console.log("The link was clicked"); 
}