未調用React JS onClick方法
[英]React JS onClick method not being called
問題描述
我是React JS的新手，只是來接它。 這是我的代碼：
<!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>
當我在瀏覽器中單擊“編輯/刪除”按鈕時，它們不顯示警報對話框。 我在代碼中做錯了什么？
2 個解決方案
解決方案1
2 已采納 2017-01-24 17:18:05
React事件處理程序必須位於camelCase中： onClick（注意大寫的“ C”）
解決方案2
0 2017-01-24 17:19:31
您應該使用onClick代替onclick。 請參閱下面的工作代碼。
在此處閱讀有關處理事件的更多信息
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>
為什么我的 onClick 在渲染時被調用？ - 反應.js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.