<!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>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const { useState } = React;
function Ipt(props) {
return (
<input
type="text"
onChange={props.changeValue}
value={props.iptValue}
/>
);
}
function Btn(props) {
return <button onClick={props.add}>添加</button>;
}
function List(props) {
return (
<ul>
<li>
{props.lists.map((item, index) => {
return (
<li key={index} onClick={() => props.del(index)}>
{item}
</li>
);
})}
</li>
</ul>
);
}
function App() {
const [iptValue, setIptValue] = useState("react");
const [list, setList] = useState([1, 2, 3, 4]);
// 改变hooks里面的state
const changeValue = (e) => {
setIptValue(e.target.value);
};
// 添加
const add = () => {
if (iptValue) {
setList([...list, iptValue]);
setIptValue("");
}
};
// 删除
const del = (index) => {
const newList = list;
newList.splice(index, 1);
setList([...newList]);
};
return (
<div>
<Ipt changeValue={changeValue} iptValue={iptValue} />
<Btn add={add} />
<hr />
<List lists={list} del={del} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
</html>
react,function函数实现todolist(拆分)
最新推荐文章于 2024-08-12 15:12:40 发布