react中监听

鲤忆

于 2023-03-24 19:20:43 发布

阅读量487

点赞数

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

本文链接：https://blog.csdn.net/m0_62487693/article/details/129756971

版权

react 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<body>
    <div id="app"> </div>
    <script src="./assets/react16.4.js"></script>
    <script src="./assets/react-dom.js"></script>
    <script src="./assets/babel.min.js"></script>
    <script type="text/babel">
        const handle = (e)=>{
            console.log('click run',e)
            console.log('事件处理函数；处理业务的');
        }

        const bar = (e,item)=>{
            console.log('点击列表了',item,e);
        }

        let msg = '等待输入....'
        const oninput = (e)=>{
            console.log(e.target.value);
            msg = e.target.value;
        }
        let list = ['前端','java','嵌入式'];
        let vnode = (
            <div>
                {/* 
                 语法：
                 on事件名={()=>{事件处理函数()}}
                */}
              <button onClick={(e)=>{handle(e)}}>监听点击事件</button>  

              {
                // 列表事件绑定
                // 通过传参方式。区分点击哪个列表项目
                list.map(item=>{
                    return <h1 key={item} onClick={(e)=>{bar(e,item)}}>{item}</h1>
                })
              }

              <input type="text" onInput={(e)=>{oninput(e)}} />
              <h1>{msg}</h1>
            </div>
        )

        ReactDOM.render(vnode,document.getElementById('app'))
    </script>
</body>