析构运算符 ... 的使用理解
程序员文章站
2022-03-22 10:13:45
代码示例： Document
代码示例：
<!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数组里添加一个对象。这个添加是前增unshift。
关注使用形式：
setList([{ id: Date.now(), content: e.target.value }, ...list]);
本文地址：https://blog.csdn.net/CCQStudy/article/details/109243660
上一篇： JS 函数与方法中this指向
下一篇： mapbox获取图层中要素的属性值