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

最新推荐文章于 2025-06-02 01:38:55 发布

原创最新推荐文章于 2025-06-02 01:38:55 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用React Hooks实现的状态管理示例，通过useState更新输入框值及列表项，并提供了添加和删除功能。此示例展示了如何在React应用中有效地管理状态。

<!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 App() {
        const [iptValue, setIptValue] = useState("react");
        const [list, setList] = useState([1, 2, 3]);
        // 输入框是值改变，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>
            <input type="text" value={iptValue} onChange={changeValue} />
            <button onClick={add}>添加</button>
            <hr />
            <ul>
              {list.map((item, index) => {
                return (
                  <li key={index} onClick={() => del(index)}>
                    {item}
                  </li>
                );
              })}
            </ul>
          </div>
        );
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>