Uncaught ReferenceError: handleClick ist nicht definiert - Reagieren

Gehe ich direkt auf den Punkt. Dies ist die Komponente, auf die ich in einem ReactJS Anwendung:

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>
    );
  }
}

Warum erhalte ich die folgende Fehlermeldung, wenn die Komponente geladen ist?

Uncaught ReferenceError: handleClick is not defined

EDIT:

Nachdem Sie Antworten, änderte ich meinen code zu diesem:

  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>
    );
  }

Wie Sie sehen können, habe ich .map die Iteration durch eine Liste der Bücher.
Für jedes der Bücher habe ich einen button, der, wenn darauf geklickt wird, fügen Sie die spezifischen Buch des Benutzers Warenkorb.

Wenn ich follow @Tharaka Wijebandara Antwort, ich kann einen button funktioniert außerhalb .map aber in diesem Fall habe ich immer noch den Fehler:

Uncaught (in promise) TypeError: Cannot read property 'handleClick' of undefined
    at http://localhost:8080/bundle.js:41331:89
    at Array.map (native)
InformationsquelleAutor splunk | 2017-04-19
Schreibe einen Kommentar