React JS onClick-Methode wird nicht aufgerufen

Ich bin neu in React JS und nehme es gerade ab. Hier ist mein Code:React JS onClick-Methode wird nicht aufgerufen

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>React - Component</title> 
<script src="../../js/react.min.js"></script> 
<script src="../../js/react-dom.min.js"></script> 
<script src="../../js/browser.min.js"></script> 
</head> 
<body> 
<div id="container"></div> 
<script type="text/babel"> 
    var Comment= React.createClass({ 
    edit:function(){ 
     alert('Editing comment'); 
     }, 
    remove:function(){ 
     alert('Remove comment'); 
     }, 
    render:function(){ 
     return(
     <div classname="commentContainer"> 
     <div classname="commentText">Whatever</div> 
      <button classname="button-primary" onclick={this.edit}>Edit</button> 
      <button classname="button-danger" onclick={this.remove}>Delete</button> 
     </div> 
    ); 
    } 
    }); 

    ReactDOM.render(
    <div classname="board"> 
    <Comment>LOL</Comment> 
    </div>, 
    document.getElementById('container') 
); 
</script>

Wenn ich das Bearbeiten klicken/Löschen-Taste im Browser sie nicht die Warnmeldung angezeigt. Was mache ich falsch im Code?

Quelle

2017-01-24 blaziken105

Vielleicht sollte es sein 'onClick = {this.edit.bind (this)}' Handhabung? Sie bekommen irgendwelche Fehler? – putvande

onclick ==> onClick – FurkanO

Ich denke, Sie haben das falsche Gehäuse für onClick, Sie müssen ein Kapital C wie onClick = {this.edit} haben. – MDiesel

Reagieren müssen Event-Handler in camelcase sein: onClick (die Hauptstadt 'C') Hinweis

Quelle

2017-01-24 17:18:05

Funktioniert jetzt gut thnx – blaziken105

Sie onClick statt Onclick verwenden sollten. Siehe den Arbeitscode unten.

Lesen Sie mehr über die Ereignisse in reagieren here

var Comment= React.createClass({ 
 
    edit:function(){ 
 
     alert('Editing comment'); 
 
     }, 
 
    remove:function(){ 
 
     alert('Remove comment'); 
 
     }, 
 
    render:function(){ 
 
     return(
 
     <div classname="commentContainer"> 
 
     <div classname="commentText">Whatever</div> 
 
      <button classname="button-primary" onClick={this.edit}>Edit</button> 
 
      <button classname="button-danger" onClick={this.remove}>Delete</button> 
 
     </div> 
 
    ); 
 
    } 
 
    }); 
 

 
    ReactDOM.render(
 
    <div classname="board"> 
 
    <Comment>LOL</Comment> 
 
    </div>, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>React - Component</title> 
 
</head> 
 
<body> 
 
<div id="container"></div>

Quelle

2017-01-24 17:19:31 WitVault

React JS onClick-Methode wird nicht aufgerufen

Antwort

Verwandte Themen