析构运算符 ... 的使用理解

最新推荐文章于 2021-09-17 21:43:38 发布

你的玄烨

最新推荐文章于 2021-09-17 21:43:38 发布

阅读量201

点赞数

分类专栏： react JavaScript 文章标签： react js vue

本文链接：https://blog.csdn.net/CCQStudy/article/details/109243660

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

react

17 篇文章 0 订阅

订阅专栏

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>    
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script type="text/babel">
      const { useState } = React;
      function Count(props) {
        const [list, setList] = useState([]);
        const keyUpHandle = (e) => {
          if (e.keyCode === 13) {
            // ...析构运算符，每次设置一个新的state
            setList([{ id: Date.now(), content: e.target.value }, ...list]);
            console.log(list);
          }
        };
        return (
          <div>
              <h3>循环赋值</h3> {" "}
            <input type="text" onKeyUp={keyUpHandle} placeholder="请输入内容" />
            <ul>
              {list.map((item) => (
                <li key={item.id}>{item.content}</li>
              ))}
            </ul>
          </div>
        );
      }
      ReactDOM.render(<Count />, document.getElementById("app"));
    </script>
  </body>
</html>

在这里插入图片描述

因为监听的是按键抬起事件，所以第一次鼠标点击进入文本框给list里添加了一个空值。然后我们每输入一个值敲一次回车，就往list数组里添加一个对象。这个添加是前增push。

关注使用形式：

  setList([{ id: Date.now(), content: e.target.value }, ...list]);

你的玄烨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
析构运算符 ... 的使用理解

代码示例：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body&g
复制链接

扫一扫

专栏目录