绑定事件-传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>
<body>
    <div id="app"></div>
    
    <script type="text/babel">
        // 封装App 组件
        class App extends React.Component{ 
            constructor(){
                super(); 
                this.state = { 
                    movies:['流浪地球','盗梦空间','大话西游'] 
                } 
 
               this.btnClick = this.btnClick.bind(this);
            }

            render(){ 
                return ( 
                    <div> 
                       
                        <button onClick={this.btnClick}>按钮2</button> 

                        <ul>
                            {
                                this.state.movies.map((item,index)=>{
                                    return (
                                        <li onClick={e =>{ this.liClick(item,index,e)}}>
                                           {item}
                                        </li>
                                    ) 
                               })
                            } 
                        </ul>
                    </div> 
                )
            }

       
            btnClick(e){
                console.log(e);  
            }

            liClick(item,index,e){
                console.log(item,index,e);
            }
 
        }
 
        ReactDOM.render(<App/>,document.getElementById('app')); 
    </script>
</body>
</html>
posted @ 2021-08-10 17:58  13522679763-任国强  阅读(20)  评论(0)    收藏  举报