react--留言板小案例（手敲代码）

最新推荐文章于 2023-03-31 18:56:40 发布

Guo努力

最新推荐文章于 2023-03-31 18:56:40 发布

阅读量765

点赞数

分类专栏： Web # react 文章标签： react.js react native javascript

本文链接：https://blog.csdn.net/qq_52522995/article/details/121066939

版权

Web # react 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

流程：

原型 --- 保真图 --- 静态页面( html css js ) --- 一个大组件( react component ) --- 组件拆分

举个栗子

react 简单的一个小案例，实现一个留言板功能，具有添加留言及删除评论的功能，并且同步显示到页面上。

原型、保真图：

静态页面：

<!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>
    <div>
        <h1>Today Tasks : 0</h1>
        <input type="text"/>
        <button>add tasks</button>
        <div>
            <ul>
                <li>0--in-2021/10/30</li> <button>del</button>
                <li>0--in-2021/10/30</li> <button>del</button>
                <li>0--in-2021/10/30</li> <button>del</button>
            </ul>
        </div>
    </div>
</body>
</html>

效果图：

一个大组件 react component (实现数据、行为、任务同步)：

<!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>
  <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>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      //页面重构
      class Tasks extends React.Component {
        //数据
        state = {
          tasks: [],
          task: "",
          date: new Date().toLocaleDateString(),
        };

        handleChange=(e)=>{
          // console.log(e.target.value);
          this.setState({
            task:e.target.value
          })
        }

        handleAdd=()=>{
          const {tasks,task}=this.state
          if(task){
            tasks.unshift(task)
            this.setState({
              tasks:tasks,
              task:'',
              date: new Date().toLocaleDateString()
            },()=>{
              console.log(this.state);
            })
          }
        }

        handleDele=(index)=>{
          const {tasks}=this.state
          tasks.splice(index,1)
          this.setState({
            tasks
          })
        }

        render() {
          return (
            <div>
              <h1>Today Tasks : {this.state.tasks.length}</h1>
              <input type="text" value={this.state.task} onChange={this.handleChange}/>
              <button onClick={this.handleAdd}>add tasks</button>
              <div>
                <ul>
                  {
                    this.state.tasks.map((task,index,date)=>{
                      return(
                        <li key={index}>
                            <span>{index+1}---{task}---{this.state.date}</span>
                            <button onClick={this.handleDele}>del</button>
                          </li>
                      )
                    })
                  }
                </ul>
              </div>
            </div>
          );
        }
      }

      ReactDOM.render(<Tasks />, document.getElementById("app"));
    </script>
  </body>
</html>

效果图如下：

可以实现同步的数据的添加及删除。

注意：删除功能使用 splice 函数来实现，用法：

定义一个 arr 数组，含有 5 个元素，使用 arr.splice(a,b,'c') 用来删除 arr 数组中的元素

其中 a 表示数组下标 ( 从 a 下标开始 ) ； b 表示删除 b 个元素； 'c' 表示在 a 下标处添加一个元素 'c' 。

例：

      var arr=['a','b','c','d','e']
      console.log(arr);
      arr.splice(1,1)
      console.log(arr);
      arr.splice(1,2,'www')
      console.log(arr);

Guo努力

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react--留言板小案例（手敲代码）

流程：原型 --- 保真图 --- 静态页面( html css js ) --- 一个大组件( react component ) --- 组件拆分举个栗子react 简单的一个小案例，实现一个留言板功能，具有添加留言及删除评论的功能，并且同步显示到页面上。原型、保真图：静态页面：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫