检查是否所有复选框都被选中并且 console.log("all checked") Javascript/React

Question

以下组件是一个待办事项列表。我有多个复选框。一旦选中所有复选框，就会出现 console.log("all checked")。

我的想法是检查todo.lengh === checked.length，但它不起作用。

问题：尝试 console.log(checked.length) 也不起作用，所以一定是有问题。

有人可以帮助我如何到达 checked.length 吗？

import React from 'react';
import { AiOutlinePlusCircle } from 'react-icons/ai';
import { useState } from 'react';

function Checkboxes() {
  const [todo, setToDo] = React.useState('');
  const [todos, setToDos] = React.useState([]);
  const [checked, setChecked] = useState(false);

  function handleToDoSubmit(e) {
    e.preventDefault();

    const newToDo = {
      id: new Date().getTime(),
      text: todo,
      completed: false,
    };

    setToDos([...todos].concat(newToDo));
    setToDo('');
  }

  function toggleCompleteToDo(id) {
    const updatedToDos = [...todos].map((todo) => {
      if (todo.id === id) {
        todo.completed = !todo.completed;
      }
      return todo;
    });
    setToDos(updatedToDos);
  }

  function allChecked(checked) {
    if (todo.length === checked.length) {
      console.log('all checked');
    }
  }

  return (
    <div className="ToDoList">
      <form className="goalInputToDo" onSubmit={handleToDoSubmit}>
        <input
          className="goalInput"
          type="text"
          onChange={(e) => setToDo(e.target.value)}
          value={todo}
        />
        <button className="AddGoalBtn" type="submit">
          .
          <AiOutlinePlusCircle size="2em" />
        </button>
      </form>

      {todos.map((todo) => (
        <div className="goalItem">
          <div key={todo.id}>
            <div>{todo.text}</div>
            <input
              type="checkbox"
              onChange={() => {
                toggleCompleteToDo(todo.id), allChecked(todo.checked);
              }}
              checked={todo.completed}
            />
          </div>
        </div>
      ))}
    </div>
  );
}
export default Checkboxes;

Answer 1

todo 是一个字符串，checked 是一个布尔值，所以我不确定您想如何使用它们来检查是否选中了所有复选框。您可以做的是检查 todos 数组并检查每个项目的 completed 属性是否为 true.

您可以使用 Array#every() 来执行此操作。它测试数组中的所有元素是否通过提供的函数实现的测试：

function allChecked() {
  return todos.every(item => item.completed)
}

function App() {
  const [todo, setToDo] = React.useState('');
  const [todos, setToDos] = React.useState([{
    id: new Date().getTime(),
    text: 'First item',
    completed: false,
  }]);

  function handleToDoSubmit(e) {
    e.preventDefault();

    const newToDo = {
      id: new Date().getTime(),
      text: todo,
      completed: false,
    };

    setToDos(todos.concat(newToDo));
    setToDo('');
  }

  function toggleCompleteToDo(id) {
    const updatedToDos = todos.map((item) => {
      if (item.id === id) {
        item.completed = !item.completed;
      }
      return item;
    });
    setToDos(updatedToDos);
  }

  function allChecked() {
    if (!todos.length) return false;
    return todos.every((item) => item.completed);
  }

  return (
    <div className="ToDoList">
      <form className="goalInputToDo" onSubmit={handleToDoSubmit}>
        <input
          className="goalInput"
          type="text"
          onChange={(e) => setToDo(e.target.value)}
          value={todo}
        />
        <button className="AddGoalBtn" type="submit">
          Add
        </button>
      </form>

      {todos.map((item) => (
        <div className="goalItem">
          <div key={item.id}>
            <input
              type="checkbox"
              onChange={() => {
                toggleCompleteToDo(item.id), allChecked(item.checked);
              }}
              checked={item.completed}
            />
            <span>{item.text}</span>
          </div>
        </div>
      ))}
      <p>All checked: {allChecked() ? 'Yes' : 'No'}</p>
    </div>
  );
}


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>

检查是否所有复选框都被选中并且 console.log("all checked") Javascript/React

Check if all checkboxes are checked and console.log("all checked") Javascript/React

javascript

checkbox

reactjs