javascript - 如何在 react js中显示和处理依赖于后端(Mongodb)中任务数组值的动态复选框？

Question

我正在做一个 React 项目，我有这样的要求，

我在容器内有数组，1 个对象和 1 个名为 Task[] 的数组

"contractor": [
                {
                  "contractGivenBy": -1,
                  "contractorID": 0,
                  "contractorName": "contractor1",
                  "reviewedByAssigner": false,
                  "submitReviewToAssigner": false,
                  "tasks": [ 2, 4, 6 ],
                  "tasksDone": false
                },

现在，我想在页面中将任务数组显示为复选框。

这很好，我使用 map() 方法显示了所有复选框，但问题是，当用户选中或取消选中特定复选框时如何处理(从这些复选框获取值)。

我正在使用带有 React Hook 的 React 功能组件。

这是尝试过的..

   <form onSubmit={onSubmitHandler}>
      {               
         projectData.contractor[0].tasks.map((task, index) => {
              return (
                     <div style={{ flexDirection: "column" }}>

                         <FormControlLabel
                             control={
                                 <Checkbox
                                    checked={false}
                                    value={task}
                                    onChange={handleTask} />
                                }
                                 label={`task ${task}`}
                                />
                              </div>
                             )
                           })
                          }
          <Button 
              type="submit" 
               style={{ 
                   backgroundColor:"rgba(25,123,189)", 
                   color: "white" 
                 }}>
            Assgin
          </Button>
    </form>

Answer 1

已更新

给你，它使用带有复选框实现的 react 钩子(Hook)，我用 <input type /> 稍微调整了一下但你会明白的

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Checkbox = ({ type = "checkbox", name, checked = false, onChange }) => {
  console.log("Checkbox: ", name, checked);

  return (
    <input type={type} name={name} checked={checked} onChange={onChange} />
  );
};

const CheckboxExample = () => {
  const [checkedItems, setCheckedItems] = useState({});

  const handleChange = event => {
    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked
    });
    console.log("checkedItems: ", checkedItems);
  };

  const checkboxes = [
    {
      name: "check-box-1",
      key: "checkBox1",
      label: "Check Box 1"
    },
    {
      name: "check-box-2",
      key: "checkBox2",
      label: "Check Box 2"
    }
  ];

  return (
    <div>
      <lable>Checked item name : {checkedItems["check-box-1"]} </lable> <br />
      {checkboxes.map(item => (
        <label key={item.key}>
          {item.name}
          <Checkbox
            name={item.name}
            checked={checkedItems[item.name]}
            onChange={handleChange}
          />
        </label>
      ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<CheckboxExample />, rootElement);