react使用hooks实现todolist待办事项

最新推荐文章于 2022-12-26 21:25:14 发布

慧i

最新推荐文章于 2022-12-26 21:25:14 发布

阅读量655

点赞数 1

分类专栏： react 文章标签： reactjs 前端

本文链接：https://blog.csdn.net/weixin_48660657/article/details/119155605

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用hooks来实现一个简单的功能，todolist待办事项。

  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script type="text/babel">
      const { useState } = React;
      const TodoList = () => {
        const [list, setList] = useState([]);
        const saveHandle = (e) => {
          if (e.keyCode == 13 && e.target.value) {
            setList([
              ...list,
              {
                id: Date.now(),
                content: e.target.value,
                isEnd: false,
              },
            ]);
          }
        };
        const endHandle = (id) => {
          setList(
            list.map((item) => {
              if (item.id == id) {
                return {
                  ...item,
                  isEnd: true,
                };
              }
              return { ...item };
            })
          );
        };
        const delHandle = (id) => {
          setList(list.filter((item) => item.id != id));
        };
        return (
          <div className="todo-list">
            <input type="text" placeholder="请输入内容" onKeyUp={saveHandle} />
            <div className="list">
              {list.map((item) => (
                <div className="item" key={item.id}>
                  <p>{item.content}</p>
                  <div className="op">
                    {item.isEnd ? null : (
                      <button onClick={() => endHandle(item.id)}>完成</button>
                    )}
                    <button onClick={() => delHandle(item.id)}>删除</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        );
      };
      function App() {
        const getChildParams = (str) => {
          console.log(str);
        };
        return (
          <div className="main">
            <TodoList />
          </div>
        );
      }
      ReactDOM.render(<App />, document.querySelector("#app"));
    </script>
  </body>