如何在反应挂钩中以编程方式取消选中复选框列表中的所有复选框？

Question

我有一个包含 6 个项目及其各自 checkboxes.for 实例的列表，我从 6 个复选框中选择了 4 个。现在，通过单击按钮，我必须取消选中所有 4 个复选框，这些复选框被选中以 unselected.Please 谁能帮我解决这个问题。

代码：

 import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import "./App.css";


export default function App() {
      const checkList = ["Apple", "Banana", "Tea", "Coffee","orange","cookie"];
      const handleCheck = (event) => {};

     return (
          <div className="app">
          <div className="checkList">
          <div className="title">Your CheckList:</div>
          <div className="list-container">
              {checkList.map((item, index) => (
              <div key={index}>
               <input value={item} type="checkbox"  
                            onChange={handleCheck} />
          <span>{item}</span>
        </div>
      ))}
    </div>
  </div>

  <div>
    <button onclick>Reset all checkbox</button>
  </div>
</div>
    );
     }

Answer 1

因为你没有提供你的代码，所以我写了一些感觉。

// example with list
const [list, setList] = React.useState([]);

// do as much as checkbox as you want, but
// with different value
<input
  type={"checkbox"}
  value={some_value}
  checked={list.includes(some_value)}
  onChange={(e) => {
    e.target.checked
      ? setList([...list, e.target.value])
      : setList([...list].filter((o) => o !== e.target.value));
  }}
/>;

// on submit or click of button
const onSubmit = () => {
  setList([]);
};

Answer 2

您可以通过使用 useState 挂钩并使用对象数组而不是字符串数组来做到这一点，并且直接使用数组索引作为键并不是反应中的最佳实践。

import React, { useState } from "react";

function transformArray(arr) {
  let retObj = arr.map((item, index) => ({
    key: index,
    item,
    checked: false
  }));
  return retObj;
}

function App() {
  let [checkList, setCheckList] = useState(
    transformArray(["Apple", "Banana", "Tea", "Coffee", "orange", "cookie"])
  );
  const handleCheck = (event) => {
    let _list = Array.from(checkList);
    _list[event.target.name].checked = !_list[event.target.name].checked;
    setCheckList(_list);
  };
  const resetCheckbox = () => {
    setCheckList(
      checkList.map(({ key, item }) => ({ key, item, checked: false }))
    );
  };

  return (
    <div className="app">
      <div className="checkList">
        <div className="title">Your CheckList:</div>
        <div className="list-container">
          {checkList.map((item, index) => (
            <div key={item.key}>
              <input
                checked={item.checked}
                type="checkbox"
                name={index}
                onChange={handleCheck}
              />
              <span>{item.item}</span>
            </div>
          ))}
        </div>
      </div>

      <div>
        <button onClick={resetCheckbox}>Reset all checkbox</button>
      </div>
    </div>
  );
}

export default App;

Answer 3

checklist数组必须包含表示是否选中该项目的属性，所以首先你需要这样设置列表：

const [checkList, setCheckList] = useState([
    { item: "Apple", checked: false },
    { item: "Banana", checked: false },
    { item: "Tea", checked: false },
    { item: "Coffee", checked: false },
    { item: "orange", checked: false },
    { item: "cookie", checked: false }
  ]);

然后在重置函数中，您必须将所有选中的值设置为 false:

const resetClick = () => {
    for (const item of checkList) {
      item.checked = false;
    }

    setCheckList([...checkList]);
  };

并paas这个函数来删除按钮的onClick事件。以下是完整的工作代码，希望对您有所帮助！

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [checkList, setCheckList] = useState([
    { item: "Apple", checked: false },
    { item: "Banana", checked: false },
    { item: "Tea", checked: false },
    { item: "Coffee", checked: false },
    { item: "orange", checked: false },
    { item: "cookie", checked: false }
  ]);
  const handleCheck = (event) => {
    const index = checkList.findIndex((list) => list.item == event.target.name);
    checkList[index].checked = event.target.checked;
    setCheckList([...checkList]);
  };

  const resetClick = () => {
    for (const item of checkList) {
      item.checked = false;
    }

    setCheckList([...checkList]);
  };
  useEffect(() => {
    console.log(checkList);
  }, [checkList]);
  return (
    <div className="app">
      <div className="checkList">
        <div className="title">Your CheckList:</div>
        <div className="list-container">
          {checkList.map((item, index) => (
            <div key={index}>
              <input
                name={item.item}
                value={item.checked}
                checked={item.checked}
                type="checkbox"
                onChange={handleCheck}
              />
              <span>{item.item}</span>
            </div>
          ))}
        </div>
      </div>

      <div>
        <button onClick={resetClick}>Reset all checkbox</button>
      </div>
    </div>
  );
}

如何在反应挂钩中以编程方式取消选中复选框列表中的所有复选框？

How to uncheck all the checkboxes in a list of checkbox programmatically in react hooks?

javascript

reactjs

material-ui