react学习——11react中事件处理

最新推荐文章于 2024-10-10 20:22:22 发布

一叶飘零晋

最新推荐文章于 2024-10-10 20:22:22 发布

阅读量95

点赞数 1

分类专栏： react 文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/ChenJin_2/article/details/139923928

版权

react 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_事件处理.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.3.1.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development16.3.1.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
    class Demo extends React.Component{
        /*
        （1）.通过onXxx属性指定事件处理函数，（注意大小写）
            a.React使用的是自定义（合成）事件，而不是原生dom事件----为了更好兼容性
            b.React中的所有事件都是通过事件委托方式处理的（事件委托）----为了高效
        （2）.通过event.target获取发生事件的DOM元素对象
         */
        //React.createRef()创建一个容器，该容器可以存储被ref所标识的节点
        myRef = React.createRef()
        myRef2 = React.createRef()
        //自定义方法-要用赋值语句的形式+箭头函数
        showData= ()=>{
           alert(this.myRef.current.value)
        }
        showData2=(evnt)=>{
            alert(evnt.target.value)
        }
        render(){
            return(
                <div>
                    <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button ref="btn" onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                    <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                </div>
                )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>