react demo11 (添加组件事件处理)

最新推荐文章于 2023-08-31 10:51:35 发布

酷jjs

最新推荐文章于 2023-08-31 10:51:35 发布

阅读量1.1k

点赞数

分类专栏：前端笔记 react 文章标签： react

本文链接：https://blog.csdn.net/qq_32584661/article/details/71303994

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

react

19 篇文章 0 订阅

订阅专栏

需求：定义一个组件，组件包含一个button，给button绑定一个onclick事件
学习：事件处理

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react dome</title>
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>
</head>

<body>

<div id="container"></div>


<script type="text/babel">

    /*
     事件处理
     注意：react中的事件名称，首字母小写，驼峰命名法
     需求：定义一个组件，组件包含一个button，给button绑定一个onclick事件

     */


    //创建组件
    var MyButton = React.createClass({
        handleClick:function () {
            alert("点击按钮出发的效果")
        },
        render:function(){
            return <button onClick={this.handleClick}>{this.props.title}</button>
        }
    })



    //渲染
    ReactDOM.render(
        <MyButton title="按钮"/>,
        document.getElementById("container")
    )

</script>

</body>
</html>