react（八）-- 组件通信案例

最新推荐文章于 2024-06-19 19:52:41 发布

balance~~

最新推荐文章于 2024-06-19 19:52:41 发布

阅读量98

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_48942526/article/details/120923481

版权

component-communication-tasks

原型 - 保真图 - 静态页面（html js css） - react component（一个大组件：视图、数据、行为） - 组件拆分react components (多个组件)

一个组件-tasks

步骤：

视图：页面显示页面重构
数据：state
行为：添加删除


<!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>
</head>
<body>
    
    <!-- 01 定义容器 -->
    <div id="app"></div>


    <!-- 02 引入react 库 -->
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>


    <script type='text/babel'>

    /*
     原型 -  保真图 - 静态页面（html js css） - react component（一个大组件： 视图 、数据、 行为） - 组件拆分react components (多个组件)
    */

   class App extends React.Component{

        // 数据
        state = {
            tasks:[], //用于存储信息
            task:'',  //添加的信息，在tasks数组中显示 
            date:new Date().toLocaleDateString()
        }

        // 行为
        // 任务同步 ： input=>task （通过onChange行为）
        handelChange = (e) =>{
            // console.log(e.target);
            this.setState({
                task:e.target.value
            },()=>{
                // console.log('task1:',this.state.task);
            })

            // console.log('task2:',this.state.task);
        }

        // 添加任务 ： task =>tasks
        handleAddTask = () =>{
            const {task,tasks} = this.state
            if(!task){
                return 
            }
            // unshift 返回新数组的长度
             tasks.unshift(task)

            this.setState({
                tasks:tasks,
                task:'',
                date:new Date().toLocaleDateString()
            },()=>{
                console.log(this.state);
            })
        }
        // 删除任务 ： tasks 删除某个task
        handleDelete(index){
            const {tasks} = this.state
            // console.log(index);
            tasks.splice(index,1) // 删除 

            this.setState({
                tasks
            })
        }

        // 页面显示1
        // 页面重构2
        render(){
           return (
            <div>
                    <h1>Today Tasks : {this.state.tasks.length}</h1>
                    <div>
                        <input type="text" value={this.state.task} onChange = {this.handelChange}/>
                        <button onClick={this.handleAddTask}>add task</button>
                    </div>
                    <div>
                        <ul>
                            {
                                this.state.tasks.map((task,index)=>{
                                    return (
                                        <li key={index}>
                                           <span>{index+1}--{task}--{this.state.date}</span>
                                           <button onClick={this.handleDelete.bind(this,index)}>delete</button>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                </div>
           )
        }
   }
    ReactDOM.render(<App />,document.getElementById('app'))
    </script>
</body>
</html>

在这里插入图片描述

balance~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react（八）-- 组件通信案例

component-communication-tasks原型 - 保真图 - 静态页面（html js css） - react component（一个大组件：视图、数据、行为） - 组件拆分react components (多个组件)一个组件-tasks步骤：视图：页面显示页面重构数据：state行为：添加删除<!DOCTYPE html><html lang="en"><head> <meta ch
复制链接

扫一扫