react，function函数实现todolist（拆分）

最新推荐文章于 2022-12-11 11:21:15 发布

无穷已_

最新推荐文章于 2022-12-11 11:21:15 发布

阅读量135

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/About_zero/article/details/115913018

版权

react 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>

无穷已_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react，function函数实现todolist（拆分）

<!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" /> <titl
复制链接

扫一扫