06_react中的事件处理

最新推荐文章于 2024-08-16 16:55:13 发布

又菜又爱玩代码

最新推荐文章于 2024-08-16 16:55:13 发布

阅读量139

点赞数

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

本文链接：https://blog.csdn.net/qq_46431018/article/details/126162343

版权

react学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

代码里面多了一些我复习上一节视频的内容，建议小伙伴也自己多敲几遍

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
</head>

<body>
    <div id="test"></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">
        class Demo extends React.Component {
            /* 
            1.	通过onXxx属性指定事件处理函数(注意大小写)
                a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ————为了更好的兼容性
                b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)————为了高效
            2.	通过event.target得到发生事件的DOM元素对象 不要过度使用ref

             */

            //createRef方式的ref

            myRef = React.createRef()
            //myRef2 = React.createRef()

            showData = () => {
                const myRef = this.myRef.current.value
                alert(myRef)
            }

          /*   showData2 = (event) => {
                //alert(this.myRef2.current.value)
                alert(event.target.value)
            } */
            render() {
                return (
                    <div>
                        <input ref={this.myRef} type="text" />
                        <button onClick={this.showData}>按钮点击出现左边框内容</button>
                        <input /* ref={this.myRef2} */ /* onBlur={this.showData2} */  onBlur={()=>{alert(event.target.value)}} type="text" />
                    </div>
                )
            }

            //回调函数形式的ref
            /*  
            showData=()=>{
                   const {index1} =this
                   alert(index1.value)
               }
               showData2=()=>{
                   const {index2} =this
                   alert(index2.value)
               }
   
               render() {
                   return (
                       <div>
                           <input ref={(currentNode)=>{this.index1=currentNode}} type="text"/>
                           <button onClick={this.showData}>点击按钮提示数据</button>
                           <input ref={currentNode=>this.index2=currentNode} onBlur={this.showData2} type="text"/>
                       </div>
                   )
               } */

            //字符串形式的ref
            /* 
                        showData = () => {
                            const { index1 } = this.refs
                            alert(index1.value)
                        }
                        showData2 = () => {
                            const { index2 } = this.refs
                            alert(index2.value)
                        }
                        render() {
                            return (
                                <div>
                                    <input ref="index1" type="text" />
                                    <button onClick={this.showData}>点击按钮提示数据</button>
                                    <input ref="index2" onBlur={this.showData2} type="text" />
                                </div>
                            )
                        } */

        }

        ReactDOM.render(<Demo />, document.getElementById("test"))

    </script>

</body>

</html>