react----全选、反选--demo

最新推荐文章于 2023-01-05 16:28:12 发布

咩有猫腻.

最新推荐文章于 2023-01-05 16:28:12 发布

阅读量908

点赞数 2

分类专栏：三-框架类 reactjs

本文链接：https://blog.csdn.net/DcTbnk/article/details/107701584

版权

三-框架类同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

reactjs

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述

    <title>全选/反选</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, useEffect } = React;
      function CheckAll() {
        const [checkAll, setCheckAll] = useState(false);
        const [isCheckAllClicked, setCheckAllClick] = useState(false); // 因为点击单按钮和全选按钮，都会改变checkALll从而触发useEffect，导致点击单按钮还会影响其他按钮的选中效果，所以设置这个数据，为了确保仅在点击全选的按钮状态下改变对应的数据
        const [list, setList] = useState([
          {
            id: 1,
            name: "从你的全世界路过",
            checked: true,
          },
          {
            id: 2,
            name: "沙丘",
            checked: false,
          },
          {
            id: 3,
            name: "三体",
            checked: false,
          },
          {
            id: 4,
            name: "球状闪电",
            checked: false,
          },
        ]);
        useEffect(() => {
          // console.count("设置全选");
          setCheckAll(
            list.filter((item) => item.checked).length == list.length
          );
        }, [list]);

        // 全选按钮改变之后
        useEffect(() => {
          if (isCheckAllClicked) {
            setList(
              list.map((item) => {
                item.checked = checkAll;
                return item; //  需要有一个返回值，否则会出错
              })
            );
            setCheckAllClick(false);
          }
        }, [checkAll]);
        return (
          <div>
            <p>
              <label
                onClick={() => {
                  setCheckAllClick(true);
                  setCheckAll(!checkAll);
                }}
              >
                <input onChange={() => {}} type="checkbox" checked={checkAll} />
                全选
              </label>
            </p>
            <ul>
              {list.map((item) => (
                <li key={item.id}>
                  <label
                    onClick={() => {
                      // console.count(111);
                      list.find((i) => i.id == item.id).checked = !list.find(
                        (i) => i.id == item.id
                      ).checked;
                      setList([...list]); //  如果不浅拷贝的话，尽管效果变了，但是 list.checked值不会随着点击而改变
                    }}
                  >
                    <input
                      onChange={() => {}}
                      checked={item.checked}
                      type="checkbox"
                    />
                    {item.name}
                  </label>
                </li>
              ))}
            </ul>
          </div>
        );
      }
      function App() {
        return <CheckAll />;
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>

咩有猫腻.

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
react----全选、反选--demo

<title>全选/反选</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/react-d...
复制链接

扫一扫

专栏目录