React写totallist

最新推荐文章于 2024-04-24 09:40:22 发布

前端小小坤

最新推荐文章于 2024-04-24 09:40:22 发布

阅读量363

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/qq_42697338/article/details/86498436

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../react/react.production.min.js"></script>
    <script src="../react/react-dom.production.min.js"></script>
    <script src="../react/browser.min.js"></script>
</head>
<body>
    <div id="out"></div>
</body>
<script type="text/babel">
    class App extends React.Component{
        constructor(props){
            super(props)
            this.state={
                arr:[]
            }
        }
        tap(){
            let arrs = this.state.arr;
            arrs.push(this.refs.ipt.value)
            this.setState({arr:arrs})
            this.refs.ipt.value=""
        }
        del(i){
            let arr1 = this.state.arr;
            arr1.splice(i,1);
            this.setState({arr:arr1})
        }
        render(){      
            var _this = this;
            return(
                <div>
                    <div>totallist</div>
                    <input type="text" ref="ipt"/>
                    <button onClick={this.tap.bind(this)}>增加</button>
                    <hr/>
                    {
                        this.state.arr.map(function(item,i) {
                            return(
                                <div>
                                    <span>{item}</span>  
                                    <button onClick={_this.del.bind(_this,i)}>删除</button>
                                </div>
                            )
                        })
                    }
                   
                </div>
            )
        }
    }

    ReactDOM.render(<App/>,document.getElementById("out"))
</script>
</html>

前端小小坤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React写totallist

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫