React组件开发经典案例--todolist

Posted 2020-09-02 心中有一海

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React组件开发经典案例--todolist相关的知识，希望对你有一定的参考价值。

点开查看代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>todolist2</title>
    <link rel="stylesheet" href="">
    <script type="text/javascript" src="../build/react.js"></script>
    <script type="text/javascript" src="../build/react-dom.js"></script>
    <script type="text/javascript" src="../build/browser.min.js"></script>
</head>
<body>
    <div id="box">
        
    </div>
    <script type="text/babel">
        var Todolist=React.createClass({
                //初始化状态
                getInitialState:function(){
                    return({
                        collection:[]})
                },
                render:function(){
                    return(
                        <div>
                            <input type="text" name="" ref="yzxText"/>
                            <input type="button" name="" value="add" onClick={this.handleClick}/>
                            <List items={this.state.collection} delEvent={this.DelClick}>
                            </List>
                        </div>
    
                    )
                },
                handleClick:function(){
                    this.state.collection.push(this.refs.yzxText.value);
                    this.setState({
                    collection: this.state.collection
                    })
                },
                DelClick:function(index){
                    this.state.collection.splice(index,1);
                    this.setState({
                    collection: this.state.collection
                    })
                }
        });
        var List=React.createClass({
        render:function(){
        var _this=this;
            return(
                    <ul>
                    {
                      this.props.items.map(function(item,index){
                        return    <li key={index}>{item}
                                <input type="button" name="" value="del" onClick={
                                _this.handleDelclick.bind(_this,index)}/>
                            </li>
                         })
                    }
                    </ul>
               
            ) 
        },
        handleDelclick:function(index){
            this.props.delEvent(index);
        }
        })
        ReactDOM.render(<Todolist></Todolist>,document.getElementById(\'box\'));
    </script>
</body>
</html>

*此案例重点在React的父子组件之间数据的传递。

*父组件影响子组件时，通常通过设置状态，子组件设置一个属性来接收这一状态的值。

*子组件要影响父组件时,通过改变自身属性（这里的属性值为一个函数，这样就和父组件产生了联系），这个函数里给父组件设置新的状态的值。

*在动态获取数据渲染dom时，通常需要通过map映射数组，return结果，这个结果通常就是我们需要映射出的节点。这里this指向是window,而不是组件本身,所以通常需要在渲染时先保存this。

*要获取事件的索引值并对一个函数传参但不执行这个函数时，在方法名后.bind(_this,index)来改变this的指向并且给函数传入index参数。

以上是关于React组件开发经典案例--todolist的主要内容，如果未能解决你的问题，请参考以下文章

React工程化——webpack构建react工程化——react脚手架解析——函数组件间的通信父—子——函数组件事件绑定——todolist案例

React模块化案例 - TodoList - 页面拆分 - 静态页面搭建 - 动态页面交互实现 - 总结

Vue TodoList案例组件通信方式webStorage插槽（3种）

React 入门学习-- TodoList 案例