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-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>
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页