react 组件中的事件处理

最新推荐文章于 2023-12-02 16:20:55 发布

胡椒粉0121

最新推荐文章于 2023-12-02 16:20:55 发布

阅读量854

点赞数

分类专栏：前端MVVM框架—React

本文链接：https://blog.csdn.net/huangjianfeng21/article/details/94180139

版权

前端MVVM框架—React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

react 组件中的事件处理的介绍

通过onXxx属性指定组件的事件处理函数(注意大小写)

React使用的是自定义(合成)事件, 而不是使用的原生DOM事件，React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

onXxx={this.eventHandler}

在组件中添加事件处理方法，通过event.target得到发生事件的DOM元素对象

eventHandler(event) {}

简单的事件处理实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_refs</title>
</head>
<body>
<br>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    // 1. 定义组件
    class Mycomponent extends React.Component {
        constructor (props) {
            super (props)
            this.handleBlur = this.handleBlur.bind(this)
        }

        handleBlur (event) {
            console.log(event.target)
            console.log(event.target.value)
        }
        handleClick = (event) => {
            console.log(event.target) //  <div className="box">点击获取我</div>
            console.log(event.target.className) //box
            console.log(event.target.innerHTML) //点击获取我
        }

        render () {
            return (
                <div>
                    <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
                    <div onClick={this.handleClick} className='box'>点击获取我</div>
                </div>
            )
        }
    }

    // 2. 渲染组件标签
    ReactDOM.render(<Mycomponent/>, document.getElementById('example'))
</script>
</body>
</html>

各类事件的特殊情况

react的onChange事件

胡椒粉0121

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react 组件中的事件处理

react 组件中的事件处理的介绍通过onXxx属性指定组件的事件处理函数(注意大小写)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件，React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)onXxx={this.eventHandler}在组件中添加事件处理方法，通过event.target得到发生事件的DOM元素对象eventHand...
复制链接

扫一扫

专栏目录