React事件处理机制与ref应用-优快云博客

本文链接：https://blog.youkuaiyun.com/S2763427717/article/details/131262616

通过onXxx属性指定事件处理函数（注意大小写）
a.React使用的是自定义（合成）事件，而不是使用原生的dom事件————为了更好的兼容性
b.React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）————为了更高效

通过event.target得到发生事件的dom元素对象————不要过度使用ref

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <div id="test"></div>

    <script type="text/babel">
        class Demo extends React.Component{
            myRef = React.createRef()
            showInfo = () => { 
                console.log(this.myRef.current);
                alert(this.myRef.current.value)
            }
            showData = (event)=>{
                console.log(event.target.value);
            }
            
            render(){
                return(
                    <div>
                        <input ref={this.myRef} type="text"/><br/>
                        <button onClick = {this.showInfo}>点击我弹出上方输入框内容</button><br/>
                        <input type="text" onBlur={this.showData}/>
                    </div>
                )
            }

        }

        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

react中的事件处理