javascript - React JS onClick 方法没有被调用

标签 javascript reactjs

我是 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>

当我单击浏览器中的编辑/删除按钮时,它们不显示警报对话框。我在代码中做错了什么?

最佳答案

React 事件处理程序需要采用驼峰命名法: onClick(注意大写“C”)

关于javascript - React JS onClick 方法没有被调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41834315/

相关文章:

javascript - 传递 PHP 数组以填充多个 ChartJS 图表的有效过程是什么?

reactjs - Reactjs 和 nextjs 有什么区别

javascript - 如何为 Facebook Messenger 等聊天应用程序实现 React 无限滚动组件?

reactjs - enzyme 测试,上下文不渲染元素

javascript - 数组作为 React 中的状态的问题

javascript - 失败页面 "/404/"的 page-data.json 中的错误语句页面数据

javascript - 如何将数据从父窗口传递到子弹出窗口

javascript - 响应已被 'return false' 取消的 Submit() 操作的最简单方法是什么

javascript - 无法在图像 map 上的鼠标位置显示 div

javascript - 如何使用 Node js 设置代理服务器?