TODOLIST

最新推荐文章于 2021-03-18 08:16:45 发布

原创最新推荐文章于 2021-03-18 08:16:45 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用React构建的应用案例，演示了如何通过组件的状态管理实现动态列表的添加与删除功能。代码中详细展示了如何使用React的state和setState方法来更新组件状态，并在界面上实时反映变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react语法写的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../lib/react.production.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../lib/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../lib/browser.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="out"></div>
    </body>
    <script type="text/babel">
        class App extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    str:[]
                }
            }
            tap(){
                let arr=this.state.str;
                arr.push(this.refs.ipt.value)//把每个值添加到数组里
                this.setState({str:arr})
                this.refs.ipt.value=''//把input框清空
            }
            del(i){
                let arr1=this.state.str;
                arr1.splice(i,1)//删除根据数组索引
                this.setState({str:arr1})
            }
            render(){
                console.log(this.state.str)
                var _this=this;
                return(
                    <div>
                        <h1>155</h1>
                        <input type="text" ref="ipt" />
                        <button onClick={this.tap.bind(this)}>添加</button>
                        {
                            this.state.str.map(function(item,i){
                                return(
                                    <div>
                                        <span>{i}---{item}</span>
                                        <button onClick={_this.del.bind(_this,i)}>删除</button>
                                    </div>
                                )
                            })
                        }
                    </div>
                )
            }
        }
        ReactDOM.render(<App />,document.getElementById('out'))
    </script>
</html>